forEach不是将多个图像上传到cloudinary的功能

Question

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

@Override
public boolean onKeyDown(int KeyCode, KeyEvent event){

    boolean handled = false;


    if(KeyCode == KeyEvent.KEYCODE_CHANNEL_DOWN){
        Log.i("KeyEvent","Channel down button pressed");//for debugging, to be printed on logcat
        handled=true;

        //do something
    }

    else if(KeyCode == KeyEvent.KEYCODE_CHANNEL_UP){
        Log.i("KeyEvent","Channel up button pressed");//for debugging, to be printed on logcat
        handled=true;

        //do something
    }


    if(handled){

        return handled;
    }

    //return super.onKeyDown() to attend unattended KeyEvent
    else{
        return super.onKeyDown(KeyCode, event);
    }
}

上载功能正常运行。稍后，我将把这两个功能组合为一个，但仅出于开发目的，我将其分开，因为第二个功能（即uploadImages）无法正常工作。

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) }); }) }, 是：

（单击可放大）

并且控制台中显示的错误是：

  

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

我做错了什么？

Answer 1

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

Answer 2

问题是您正在尝试在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)
            });
    });
}