Question

我的应用程序的一小部分允许用户上传5个不同的图像，一旦图像上传，它就会显示一个小缩略图。

由于我上传了一张图片，一切正常。

当我尝试上传多张图片时，让我们一起坐3，最后上传3张相同的图片，显示3张相同的缩略图...而且我疯了。

以下是处理此部分的代码：

HTML：

<input id="pics" type="file" accept="image/*" class="upload" data-imageid="" data-imageurl="" data-callback="displayPics" data-image-type="pics" multiple />

JS：

const fileInputs = document.querySelectorAll('input[type="file"]');

[].slice.call(fileInputs).forEach(fileInput => {
    fileInput.addEventListener('change', () => {
        uploadFile(
            fileInput,
            fileInput.getAttribute('data-callback')
        );
    });
});

unction uploadFile(input, callback) {
    let formData = new FormData();

    Object.keys(input.files).forEach(current => {
        formData.append('file', input.files[current]);
        fetchAPI({
            target: 'pics/',
            method: 'POST',
            body: formData
        })
        .then(data => {
            if (callback !== undefined) {
                window[callback](data.response);
            }
        }, err => {
            // err...
        });
    });
}

我能知道这里有什么问题吗？感谢

Answer 1

fetch()来电没有设置网址。 "target"不是传递给fetch()的对象的有效选项属性。

您也不要致电Response.json()获取Response的JavaScript对象代表。

Question的代码请求每个File对象而不是单个请求。

function uploadFile(input, callback) {
    let formData = new FormData();
    for (let file of input.files) {
      // or set property to `file[N]`
      // "file["+ Array.from(formData.keys()).length +"]"
      formData.append("file", file)
    }
    fetchAPI('pics/', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      if (callback !== undefined) {
        window[callback](data.response);
      }
     }, err => {
            // err...
     })
}

无法上传多个文件

1 个答案: