[Vue警告]:事件处理程序中“上载成功”错误:“ TypeError:fns.apply不是函数”

时间:2019-01-23 16:45:46

标签: javascript vue.js vuejs2

我正在使用此plugin上传图片。但是我遇到了这个错误

  

[Vue警告]:事件处理程序中“上载成功”的错误:“ TypeError:   “ fns.apply不是函数”,位于--->   node_modules / vue-upload-multiple-image / src / components / VueUploadMultipleImage.vue    在   资产/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>

1 个答案:

答案 0 :(得分:1)

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

在您的组件中添加一种方法来处理成功的图像上传:

...

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

...

注意:您应该对beforeRemoveeditImage

做同样的事情

我希望这会有所帮助。