代码之家 › 专栏 › 技术社区 › vimuth

使用由于组件问题而无法工作的事件上载Vue.js图像

vue.js javascript

vimuth · 技术社区 · 6 年前

我正试图用这个上传图片 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:未定义VueUplodMultipleImage

1 回复 | 直到 6 年前

P3trur0 6 年前

您正在使用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,
  },

希望有帮助!