如何在Vue.js的单个组件中使用此组件?

时间:2019-08-16 05:30:17

标签: vue.js vuejs2 vue-cli

我是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');

0 个答案:

没有答案