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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)
            });
    })
},

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

evt.target.files是:

alt

(点击将其放大)

和控制台中显示的错误是:

未捕获的TypeError:evt.forEach不是函数

我做错了什么?

答案

问题是你试图在forEach上执行Event方法,但Event没有forEach方法

即使你试图用evt.target.files做,这是一个FileList,并没有forEach方法

借鉴了AJD的答案,进行了以下修改

  • 使用Object.values而不是Object.keys - 从不对密钥感兴趣,所以这消除了对let file = evt.target.files[key]的需要
  • 修复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)
            });
    });
}
另一答案

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不是将多个图像上传到cloudinary的函数的主要内容,如果未能解决你的问题,请参考以下文章

将多个图像的异步图像上传到firebase存储

将图片从 URL 上传到 Firebase 存储

带字幕的多个图像文件上传

如何将多个图像上传到 Firebase 存储并返回多个下载 URL

将多个图像上传到 Firebase

将多个图像上传到队列中的服务器