forEach - это не функция загрузки нескольких изображений в облачный - PullRequest
Новая
       29

forEach - это не функция загрузки нескольких изображений в облачный

0 голосов
/ 11 сентября 2018

Я пытаюсь загрузить изображения в облачный сервис с моего фронта Vue2JS. Я уже создал функцию, которая правильно загружает одно изображение, но у меня проблема с загрузкой нескольких изображений в цикле 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

(нажмите, чтобы увеличить)

и ошибка, которая отображается в консоли:

Uncaught TypeError: evt.forEach не является функцией

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Проблема в том, что вы пытаетесь выполнить метод 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)
            });
    });
}
0 голосов
/ 11 сентября 2018

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