将文件从 dart 客户端上传到 Node 服务器

Question

我遇到了这个问题：我无法让我的上传工作：

这是一个与标准 <form><input type="file" name="toUpload/> 配合使用的 node.js 代码

router.post('/sp/file', function (req, res) {
  // File to be uploaded
  console.log("###" + req.files);
  var fileToUpload = req.files.toUpload;
  //console.log(fileToUpload);
  var dir = __dirname + "/files";
/*  var dir = __dirname + "/files/" + Date.now();
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir);
  }*/

  fileToUpload.mv( __dirname + "/files/" + fileToUpload.name, function (err) {
    if (err) {
      console.log("error: " + err);
    } else
      console.log("upload succeeded");
    console.log(fileToUpload);
    console.log(__dirname + "/files/" + fileToUpload.name);
    uploadFilesStorj.uploadFile(__dirname + "/files/" + fileToUpload.name);
  });

});

现在，当我尝试通过 dart 上传文件时，由于发送的数据格式不同，我被卡住了：

class AppComponent {
void uploadFiles(dynamic files) {
    if (files.length == 1) {
        final file = files[0];
        final reader = new FileReader();
        //reader.onProgress.listen()
        reader.onLoad.listen((e) {
            sendData(reader.result);
        });
        reader.readAsDataUrl(file);
    }
}

sendData(dynamic data) async {
    final req = new HttpRequest();
    req.onReadyStateChange.listen((Event e) {
        if (req.readyState == HttpRequest.DONE &&
                (req.status == 200 || req.status == 0)) {}
    });
    req.onProgress.listen((ProgressEvent prog) {
        if (prog.lengthComputable)
            print("advancement : " + (prog.total / prog.loaded).toString());
        else
            print("unable to compute advancement");
    });
    req.open("POST", "/sp/file");
    req.send(data);
}

}

这是我的飞镖角前端代码

<input type="file" #upload (change)="uploadFiles(upload.files)"
                     (dragenter)="upload.style.setProperty('border', '3px solid green')"
                     (drop)="upload.style.setProperty('border', '2px dotted gray')" class="uploadDropZone" name="toUpload"/>

此方法发送的数据格式为： 请求负载：

数据：文本/html；base64,PGh0bWw+DQogICA8aGVhZD4NCiAgICAgIDx0aXRsZT5GaWxlIFVwbG9hZGluZyBGb3JtPC9

我花了很多时间都没有成功，请有人帮忙

Answer 1

我终于找到了一种将它作为多部分表单发布的方法：

void uploadFiles() {
    var formData = new FormData(querySelector("#fileForm"));
    HttpRequest.request("/sp/file", method: "POST", sendData: formData).then((req) {
        print("OK");
    });
}

与

结合使用

<form id="fileForm">
    <input type="file" #upload (change)="uploadFiles(upload.files)"
             (dragenter)="upload.style.setProperty('border', '3px solid green')"
             (drop)="upload.style.setProperty('border', '2px dotted gray')" class="uploadDropZone" name="toUpload"/>
</form>

Answer 2

您将文件内容直接写入 Dart 变体的请求正文中。然而，HTML 表单使用多部分表单编码发送请求并将文件嵌入其中。这也是您的服务器所期望的。