使用 Aurelia 上传图片到 Express/Multer Api

Question

在我的 aurelia 应用程序中实施 Image/File-Upload。 Express Api 使用 Multer 插件运行并成功接收文件和图像，已使用 Postman 进行测试。

现在我想知道如何将文件附加到 Aurelia Http/Fetch-Call。以某种方式向 Api 发出请求，但图像似乎未附加。有什么想法吗？

一些问题：

以任何方式将文件附加到请求的 body-key 是否正确，或者文件是否需要单独发送？
是否 correct/neccessary 创建 FormData 并以任何方式将文件附加到该对象？
files/images 存储在 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>

Answer 1

更改formData.images = 图片；至 formData.images = images.item(0);

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

Answer 2

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 变量定义看起来像一个全局变量

使用 Aurelia 上传图片到 Express/Multer Api

Upload Images With Aurelia to Express/Multer Api

express

multer

aurelia

Aurelia-服务：

输入元素