javascript - forEach 不是上传多个图像到 cloudinary 的函数

Question

我正在尝试从我的 Vue2JS 前端将图像上传到 cloudinary。我已经创建了正确上传单个图像的函数，但在 forEach 循环中上传多个图像时遇到问题。

upload(evt) {
    console.log(evt);
    let file = evt.target.files;
    const formData = new FormData();
    formData.append('file', file[0]);
    formData.append('upload_preset', this.cloudinary.uploadPreset);
    axios.post(this.cloudinary.url, formData)
        .then(res => {
            console.log(res.data.secure_url);
            this.offerData.thumbnail = res.data.secure_url;
        }, function (err) {
            console.log(err)
        });
},
uploadImages(evt) {
    console.log(evt);
    const formData = new FormData();
    evt.forEach(evt.target.files, function (file) {
        formData.append('file', file);
        formData.append('upload_preset', this.cloudinary.uploadPreset);
        axios.post(this.cloudinary.url, formData)
            .then(res => {
                console.log(res.data.secure_url);
            }, function (err) {
                console.log(err)
            });
    })
},

正如我所说，上传功能工作正常。稍后我会将这两个函数合并为一个，但为了开发，我将其分开，因为第二个函数 uploadImages 无法正常工作..

evt.target.files 是:

(点击放大)

控制台中显示的错误是:

Uncaught TypeError: evt.forEach is not a function

我做错了什么？

Answer 1

问题是您尝试在 Event 上执行 forEach 方法，但 Event 没有 forEach 方法

即使您尝试使用 evt.target.files 执行此操作，那也是一个 FileList，并且没有 forEach 方法

借用AJD的答案，进行以下更改

• 使用Object.values而不是Object.keys - 对 key 永远不感兴趣，因此这就不需要let file = evt.target.files [键]
• 修复 formData 可能出现的问题 - 您不断向循环中的单个循环添加内容 - 我宁愿为每个循环创建一个新的循环
• 修复this“丢失”(通过使用箭头功能)

代码就变成了

uploadImages(evt) {
    Object.values(evt.target.files).forEach(file => {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('upload_preset', this.cloudinary.uploadPreset);
        axios.post(this.cloudinary.url, formData)
            .then(res => {
                console.log(res.data.secure_url);
            }, err => {
                console.log(err)
            });
    });
}