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

爱我你怕了吗？