Javascript forEach不是将多个图像上载到cloudinary的函数

我正在尝试从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)
            });
    })
},

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

evt.target.files

是：

（单击以使其更大）

控制台中显示的错误为：

未捕获类型错误：evt.forEach不是函数

---

我做错了什么？

forEach是Javascript数组的一个函数。看起来像FileList类型的对象

您可以使用for循环迭代对象键，或者使用object.keys（）创建其键的数组，然后迭代这些键

例如：

uploadImages(evt) {
    console.log(evt);
    const formData = new FormData();
    Object.keys(evt.target.files).forEach(function(key){
        let file = evt.target.files[key];
        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)
            });
    });
}

---

forEach是Javascript数组的一个函数。看起来像FileList类型的对象

您可以使用for循环迭代对象键，或者使用object.keys（）创建其键的数组，然后迭代这些键

例如：

uploadImages(evt) {
    console.log(evt);
    const formData = new FormData();
    Object.keys(evt.target.files).forEach(function(key){
        let file = evt.target.files[key];
        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)
            });
    });
}

---

问题是您试图对

事件执行
forEach
方法，但该事件没有forEach方法

即使您尝试使用
evt.target.files
，这也是一个
FileList
，并且没有
forEach
方法

借用AJD的答案，但有以下变化


使用
Object.values
而不是
Object.keys
-对该键不感兴趣，因此无需
let file=evt.target.files[key]
解决了
formData
可能出现的问题-您一直在循环中添加一个数据-我宁愿为每个循环创建一个新数据
修复此

丢失（使用箭头功能） 然后代码变为

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)
            });
    });
}

---

问题是您试图对

事件执行
forEach
方法，但该事件没有forEach方法

即使您尝试使用
evt.target.files
，这也是一个
FileList
，并且没有
forEach
方法

借用AJD的答案，但有以下变化


使用
Object.values
而不是
Object.keys
-对该键不感兴趣，因此无需
let file=evt.target.files[key]
解决了
formData
可能出现的问题-您一直在循环中添加一个数据-我宁愿为每个循环创建一个新数据
修复此

丢失（使用箭头功能） 然后代码变为

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)
            });
    });
}

---

---

如何修复它？我删除了注释，因为我意识到你在做什么-但是，文件列表（很像事件）也没有

forEach

。。。也许

[].forEach.call（evt.target.files，function（file）{….}

？evt.forEach（evt.target.files，function（file）到底是什么{？除非vue做了一些我不知道的奇怪的事情，否则它上面没有forEach。当然，你会有一个问题，你会将每个文件添加到一个

formData

-因此如果有3个文件，第一篇文章会有1个，第二篇文章会有1和2个，第三篇文章会有1、2和3个formData我如何修复它t、 因为我意识到你在做什么-然而，文件列表（很像一个事件）也没有

forEach

…也许

[].forEach.call（evt.target.files，function（file）{..}

？evt.forEach（evt.target.files，function（file））到底是什么{？除非vue做了一些我不知道的奇怪的事情，否则它没有forEach。当然，你会有一个问题，你会将每个文件添加到一个

formData

-因此如果有3个文件，第一篇文章将有1个，第二篇文章将有1和2个，第三篇文章将在formdatawhy not

Object.values中有1、2和3个（evt.target.files）.forEach（函数（文件）{

：pIs这两者之间有什么不同吗？是否有一些好的选项可以将此范围传递到.forEach？因为现在我需要另外声明=这在.forEach之外才能访问您不需要

让file=evt.target.files[key]

…这可能仍然有问题…如果在上传之间一直在一个formData上添加，会发生什么情况？使用箭头符号-请参阅我的回答为什么不

Object.values（evt.target.files）.forEach（函数（文件）{

：这两者之间有什么不同吗？是否有一些不错的选项可以将此范围传递到.forEach？因为现在我需要另外声明=这在.forEach之外才能访问您不需要

让file=evt.target.files[key]；

…这可能仍然有问题…如果在两次上载之间一直附加到一个formData，会发生什么情况？使用箭头符号-请参阅我的答案，此解决方案也适用于单个图像谢谢：）@BT101-一次上载多个图像没有问题？如果是这样的话，我可以建议一个解决方案，一次只上传一张图片。我不明白，它不是“一次”上传，因为它是在循环中一个接一个地上传的。在这个脚本工作结束时，我在控制台中有两个或多个指向图片的链接。它工作正常。EverMind@BT101-一些API不喜欢被“轰炸”一个客户端同时发出多个请求，此解决方案也适用于单个图像。谢谢：）@BT101-一次上载多个图像没有问题？如果是，我可以建议一种解决方案，一次只上载一个图像。我不明白，这不是一次上载因为它在这个脚本工作结束时一个接一个地在循环中上传，所以我在控制台中有两个或多个指向图像的链接。它工作正常EverMind@BT101-一些API不喜欢一次被来自一个客户端的多个请求“轰炸”