关于vue.js:vueuploadimgs-上传的使用

第一步：装置

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

爱我你怕了吗？