vue.js - v-on: изменения не прослушиваются

Question

Я использую Vue.js версии 2.5.17, и недавно v-on: изменение больше не работает.

Пользователь нажимает кнопку «выбрать файлы», и при этом изменении имя изображения должно быть зафиксировано,После этого файл или файлы будут отображаться на экране, а затем сохраняться в firebase.

Вместо этого я теперь получаю сообщение об ошибке:

job.vue?d03e:825 Uncaught (in promise) TypeError: Cannot read property 'name' of undefined
    at eval (job.vue?d03e:825)
    at new Promise (<anonymous>)
    at new F (_export.js?90cd:36)
    at VueComponent.uploadFile (job.vue?d03e:823)
    at VueComponent.uploadProofOfWork (job.vue?d03e:787)
    at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-45a8035d","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/job.vue (0.491509201fd57af656ef.hot-update.js:7), <anonymous>:1096:55)
    at invoker (vue.esm.js?efeb:2027)
    at HTMLAnchorElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

Свойство name находится вfileUploaded функция прикреплена к v-on: изменить.

Шаблон:

<!-- DISPLAY IMAGES -->
<div class="job-images">
    <div v-for="(img, index) in this.job.images" :key="index" class="job-image-block">
        <img :src="img.url" :alt="img.name" />
    </div>
</div>
<!-- REMOVE IMAGE BEFORE UPLOAD -->
<div v-for="(image, index) in images" :key="index">
    <a @click.prevent="removeImage(index)">X</a>
    <img :src="image.src" />
</div>
<!-- THE CHOOSE IMAGE BUTTON -->
<span class="input-group-text btn btn-primary btn-file" id="basic-addon2">
                        <input type="file" v-on:change="fileUploaded" accept="image/png, image/jpeg, image/gif"
                               name="input-file-preview" multiple/>
                      </span>
<div>
    <p>{{ loadingText }}</p>
</div>
<!-- UPLOAD IMAGE(S) BUTTON -->
<vue-button v-userRole.worker="{cb: uploadFile, role: job.role}" accent>
    <a @click.prevent="uploadProofOfWork()" style="color: white;">
                      {{ $t('App.job.uploadFileButton' /* Save Uploaded Images */) }}
                    </a>
</vue-button>

JS

uploadProofOfWork() {
        this.uploadFile().then(imageUrl => {
            this.data.image = imageUrl;
            db
                .collection("jobs")
                .where("taskId", "==", this.taskId)
                .add(this.data)
                .then(function(docRef) {
                    this.self.clearForm();
                    this.self.loadingText = this.$t(
                        "App.job.uploadedPhotoSuccessfully"
                    ) /* Post was created successfully. */ ;
                })
                .catch(function(error) {
                    console.error("Error adding document: ", error);
                });
        });
    },
    async uploadImages() {
        const self = this;
        const results = this.images.map(async({ file }) => {
        const imageUrl = await this.uploadFile(file, self.job.taskId);
        return { name: file.name, url: imageUrl };

        });
        Promise.all(results).then(async imageUrls => {
            if (!Reflect.has(this.job, "images")) this.job.images = [];
            const images = [...this.job.images, ...imageUrls];
            const result = await db
                .collection("jobs")
                .doc(this.job.taskId)
                .set({ images }, { merge: true })
                .then(docRef => {
                    console.log("updated!", docRef);
                });
        });
    },
    uploadFile(file, jobId) {
        return new Promise((resolve, reject) => {
            const self = this;
            const storageRef = firebaseStorage
                .ref()
                .child("jobs/" + jobId + "/" + file.name + "-" + uuid.v1());
            let uploadTask = storageRef.put(file);
            uploadTask.on(
                "state_changed",
                function(snapshot) {
                    const progress =
                        snapshot.bytesTransferred / snapshot.totalBytes * 100;
                    self.loadingText =
                        this.$t('App.job.uploadedPhotoProgress') /* Upload is */ +
                        progress +
                        this.$t(
                            'App.job.uploadedPhotoProgress2'
                        );
                    /* % done. Processing post. */
                    this.upload.progress = (uploadTask.snapshot.bytesTransferred / uploadTask.snapshot.totalBytes) * 100;
                    console.log(this.upload.progress);
                },
                function(error) {
                    reject(error);
                },
                async function() {
                    const downloadUrl = await uploadTask.snapshot.ref.getDownloadURL();
                    resolve(downloadUrl);
                }
            );
        });
    },
    async fileUploaded(e) {
        const images = await Promise.all(
            Array.from(e.target.files).map(file => {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = e => {
                        resolve({ src: e.target.result, file, progress: null });
                    };
                    if (e.target.file) {
                        reader.readAsDataURL(e.target.this.file[0]);
                    }
                });
            })
        );
        this.images = images;
        console.log(this.images);
    },

Answer 1

Трассировка стека показывает ошибку в uploadFile, вызванную uploadProofOfWork. Ошибка Cannot read property 'name' of undefined. Единственная ссылка на .name внутри uploadFile - это file.name, где file - аргумент функции. Если вы посмотрите в uploadProofOfWork, то в uploadFile не будет передано ни одного аргумента:

this.uploadFile().then(imageUrl => /* ... */)

Не похоже, что ваш код определяет file в любом месте пути uploadProofOfWork. Я вижу file в fileUploaded, но, похоже, эти файлы предназначены для загрузки в uploadImages (а не uploadProofOfWork). Возможно, в вашем коде отсутствует отдельный файл для ввода «доказательства работы».