vue-upload-imgs 上传的使用

第一步：安装

cnpm i vue-upload-imgs -S

第二步：引入

main.js中引入

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

第三步：使用

<vue-upload-imgs
     multiple
     compress
     :before-read="beforeRead"
     :after-read="afterRead"
     :before-remove="beforeRemove"
     :limit="limit"
     :type="type"
     @preview="preview"
     @exceed="exceed"
     @oversize="oversize"
     v-model="files">
     <div>只能上传3张图片</div>
</vue-upload-imgs>
        
<div class="preview-bg" v-show="isPreview">
    <div class="dialog">
       <button class="close-preview"                
               @click="closePreview">
               关闭
       </button>
       <img :src="previewIMG" class="preview-img" />
    </div>
</div>

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;
         }
     }
    
};

爱我你怕了吗？