首页 > 解决方案 > 如何在 Vue.js 的单个组件中使用这个组件?

问题描述

我是 Vue.js 的初学者。我正在尝试在 VueCLI 的单个组件中使用一个名为 vue-base64-file-upload 的插件。但是,它在 index.vue 中不起作用...

我刚刚将示例(https://github.com/dhhb/vue-base64-file-upload)更改为此。

        <template>
           <div class="container">
           <h2>Upload file</h2>
           <vue-base64-file-upload 
           class="v1"
           accept="image/png,image/jpeg"
           image-class="v1-image"
           input-class="v1-input"
           :max-size="customImageMaxSize"
           @size-exceeded="onSizeExceeded"
           @file="onFile"
           @load="onLoad" />
           </div>
        </template>

        <script>
        import VueBase64FileUpload from 'vue-base64-file-upload';

        export default {
           data () {
                 return {
                    customImageMaxSize: 3 // megabytes
               };
            },
           components: {
               VueBase64FileUpload
             },
           methods: {
              onFile(file) {
              console.log(file); // file object
              },

              onLoad(dataUri) {
              console.log(dataUri); // data-uri string
              },

              onSizeExceeded(size) {
              alert(`Image ${size}Mb size exceeds limits of 
              ${this.customImageMaxSize}Mb!`);
              }
           },
        };
        app.$mount('#app');

标签: vue.jsvuejs2vue-cli

解决方案


推荐阅读