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

时间:2016-11-16 13:17:04

标签: node.js dart angular-dart

我遇到了这个问题:我无法上传工作:

这是一个node.js代码,它与标准<form><input type="file" name="toUpload/>

配合使用
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"/>

此方法发送的数据格式如下: 请求有效负载:

  

数据:text / html的; BASE64,PGh0bWw + DQogICA8aGVhZD4NCiAgICAgIDx0aXRsZT5GaWxlIFVwbG9hZGluZyBGb3JtPC9

我花了很多时间没有成功,请有人帮忙吗

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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