javascript - [Vue警告] : Error in event handler for "upload-success": "TypeError: fns.apply is not a function"

Question

我正在使用这个plugin上传图像。但我收到了这个错误

[Vue warn]: Error in event handler for "upload-success": "TypeError: fns.apply is not a function" found in ---> at node_modules/vue-upload-multiple-image/src/components/VueUploadMultipleImage.vue at assets/frontend/js/components/VueUploadMultipleImages.vue

这是我的代码，

<template>
    <div class="vue-upload-multiple-image" style='display: flex; justify-content: left;'>
        <vue-upload-multiple-image
                @upload-success='uploadImageSuccess'
                @before-remove='beforeRemove'
                @edit-image='editImage'
                @data-change='data_change'
                :dragText="dragText"
                :browseText="browseText"
                :dropText="dropText"
                :markIsPrimaryText="markIsPrimaryText"
                :popupText="popupText"
                :primaryText="primaryText"
                :data-images='images'>
        </vue-upload-multiple-image>
    </div>
</template>

<script>
    import VueUploadMultipleImage from 'vue-upload-multiple-image'
    import axios from 'axios'

    export default {
        name: 'uploader',
        data: function () {
            return {
                dragText: dragText,
                browseText: browseText,
                primaryText: primaryText,
                markIsPrimaryText: markIsPrimaryText,
                popupText: popupText,
                dropText: dropText,
                maxImage: maxImage,
                showPrimary: showPrimary,
                accept: 'image/gif,image/jpeg,image/png,image/bmp,image/jpg',
                dataImages: [],
                multiple: true,
                images: [],
                uploadImageSuccess : '',
                beforeRemove: '',
                editImage : '',
            }
        },
        components: {
            VueUploadMultipleImage
        },
        methods: {
            data_change(data) {
                console.log(data);
                alert('asasa');
            }
        }
    }

new Vue({
    el: "#car-image-upload",
    components: {
        'uploader': VueUploadMultipleImages
    },
})
</script>

<div id="car-image-upload"><uploader></uploader></div>

Answer 1

您的uploadImageSuccess设置为字符串，而不是方法。您收到错误是因为 vue-upload-multiple-image 组件尝试将其作为函数调用。

向组件添加一个方法来处理成功的图像上传:

...

methods: {
  uploadImageSuccess(formData, index, fileList) {
    // Do whatever you need here
  }
},

...

注意:您应该对 beforeRemove 和 editImage 执行相同的操作

我希望这会有所帮助。