使用 Aurelia 将图像上传到 Express/Multer Api答案

【问题标题】：Upload Images With Aurelia to Express/Multer Api使用 Aurelia 将图像上传到 Express/Multer Api
【发布时间】：2016-09-29 00:48:23
【问题描述】：

在我的 aurelia 应用程序中实现图像/文件上传。 Express Api 使用 Multer 插件工作并成功接收文件和图像，并通过 Postman 测试。

现在我想弄清楚如何将文件附加到 Aurelia Http/Fetch-Call 中。以某种方式向 API 发出了请求，但图像似乎没有附加。有什么想法吗？

一些问题：

以任何方式将文件附加到请求的正文键是否正确，或者文件是否需要单独发送？
创建 FormData 并将文件（以任何方式）附加到该对象是否正确/必要？
文件/图像存储在 HTTP 请求的哪一部分，如何在服务器端识别它们（以防我的中间件无法正常工作）？

这是我目前的方法：

Aurelia-服务：

uploadImagesApi(images) {
    let formData = new FormData()
    formData.images = images;
    return http.fetch(url+"/", {
      method: 'put',
      body: formData, // <-- Is this correct?
    }).then(response => {
      return response
    }).catch(error => {
      console.log("Some Failure...");
      throw error.content;
    })
}

输入元素

<input class="input" type="file" files.bind="images" multiple>
<a click.delegate="uploadImagesApi(images)">Upload</a>

【问题讨论】：

转到 firebug 并查看错误日志和 http 日志。可能完全被服务器或浏览器拒绝了 API 请求？
没有错误...但很想知道如何将文件附加到 Aurelia FetchRequest...

标签： express aurelia multer

【解决方案1】：

uploadImagesApi(images) {
        let formData = new FormData()

        for (let i = 0; i < images.length; i++) {
            formData.append('images', images[i]);
        }

        return http.fetch(url + "/", {
                method: 'put',
                body: formData,
            })
            .then(response => {
                return response
            })
            .catch(error => {
                console.log("Some Failure...");
                throw error.content;
            })
    }

确保你定义的 url 变量看起来像一个全局变量

【讨论】：

@Seltsam 嗨，formData.append 对我不起作用，它附加了空的formData，想知道，以上内容足以将文件上传到服务器吗？我的问题是link

【解决方案2】：

改变formData.images = images; to formData.images = images.item(0);

可能还需要在 formData 中使用 'file' 键而不是 'images'：formData.file = images.item(o)

【讨论】：

两个都试过了，没用。
@Seltsam，我找不到一种解决方案来修复文件上传到服务器，你完成了吗？