vue-upload-imgs 上传的使用

第一步：安装

cnpm i vue-upload-imgs -S

第二步：引入

main.js中引入

import VueUploadImgs from 'vue-upload-imgs'
Vue.use(VueUploadImgs)

第三步：使用

     
只能上传3张图片

        

    

       
               关闭
       
       
    

export default {
     data() {
        return {
            files: [],
            maxSize: 1024 * 10, // 10 KB
            previewIMG: null,
            limit: 3,
            isPreview: false,
            type: 2 // 0:预览 1:列表 2:预览+上传
            }
      },
      methods: {
         oversize(file)
         {
             console.log('filesize:' + file.size / 1024 + 'KB')
         },
         afterRead(file) 
         {
             console.log('after-read');
             console.log(file);
         },
         beforeRemove(index, file) 
         {
             console.log(index, file);
             return true;
         },
         preview(index, file)
         {
             this.previewIMG = file.url;
             this.isPreview = true;
         },
         exceed()
         {
             alert(`只能上传${this.limit}张图片`);
         },
         closePreview()
         {
            this.isPreview = false
         },
         beforeRead(files) {
            console.log('before-read');
            for (let i = 0, len = files.length; i < len; i++) {
                const file = files[i];
                if (file.type != 'image/jpeg' && file.type != 'image/png') {
                    alert('只能上传jpg和png格式的图片');
                    return false;
                }
            }
            return true;
         }
     }
    
};

爱我你怕了吗？