Question

我正在尝试使用此plugin上传图像，但是很遗憾，我的uploadImageSuccess事件未触发。如果错了，真的很抱歉，因为我是Vue.js的新手。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>vue-upload-multiple-image</title>
    </head>
    <body>
        <div id="el">
            <div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
                <vue-upload-multiple-image
                    @upload-success="uploadImageSuccess"
                    @before-remove="beforeRemove"
                    @edit-image="editImage"
                    @data-change="dataChange"
                    :data-images="images"
                    ></vue-upload-multiple-image>
            </div>
        </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
        <script src="https://unpkg.com/vue-upload-multiple-image@1.0.2/dist/vue-upload-multiple-image.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#el',
                data() {
                    return {
                        images: []
                    }
                },
                components: {
                    VueUploadMultipleImage
                },
                methods: {
                    uploadImageSuccess(formData, index, fileList) {
                        alert('dd');
                        console.log('data', formData, index, fileList)
                        // Upload image api
                        // axios.post('http://your-url-upload', { data: formData }).then(response => {
                        //   console.log(response)
                        // })
                    },
                    beforeRemove(index, done, fileList) {
                        console.log('index', index, fileList)
                        var r = confirm("remove image")
                        if (r == true) {
                            done()
                        } else {
                        }
                    },
                    editImage(formData, index, fileList) {
                        console.log('edit data', formData, index, fileList)
                    },
                    dataChange(data) {
                        console.log(data)
                    }
                }
            });
        </script>
    </body>
</html>

如果有人可以帮助，那就太好了。我收到此错误：

ReferenceError：未定义VueUploadMultipleImage

Answer 1

您正在使用CDN网站（即https://unpkg.com/vue-upload-multiple-image@1.0.2/dist/vue-upload-multiple-image.js）导入插件。因此，它将在您的DOM中直接（全局）可用。因此，您不需要使用以下命令进行安装 VueUploadMultipleImage：

 components: {
      VueUploadMultipleImage
 },

然后，通过删除上述代码段，您将摆脱ReferenceError。

为了完整起见，请注意，仅当您通过NPM使用插件时，才需要以上代码段。在这种情况下，您应该首先导入插件：

import VueUploadMultipleImage from 'vue-upload-multiple-image'

，然后使用：

  components: {
    VueUploadMultipleImage,
  },

希望有帮助！

使用由于组件问题而无法正常运行的事件，使用Vue.js上传图像

1 个答案: