时间戳

首页 > 解决方案 > [Vue 警告]：“上传成功”的事件处理程序出错：“TypeError：fns.apply 不是函数”

javascript - [Vue 警告]：“上传成功”的事件处理程序出错：“TypeError：fns.apply 不是函数”

问题描述

我正在使用这个插件来上传图片。但我收到了这个错误

[Vue 警告]：“上传成功”的事件处理程序出错：“TypeError：fns.apply 不是函数”在 ---> 在 node_modules/vue-upload-multiple-image/src/components/VueUploadMultipleImage 中找到。 vue 在 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>

标签： javascriptvue.jsvuejs2

解决方案

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

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

...

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

...

注意：你应该对beforeRemoveand做同样的事情editImage

我希望这有帮助。

推荐阅读