<div class="upload_files"> <div class="upload_file_box"> <div v-for="(item,index) in imgList" class="add"> <img :src="item.file.src" alt=""> <div class="delimg"> <img class="del" src="../../assets/imgs/delete.png" @click.stop="delImg(index)"/> </div> </div> </div> <div class="upload_file_box upload_file_box_add"> <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> <div class="add" @click="chooseType"> <div class="add-image" align="center"> <div><img src="../../assets/imgs/upload.png" alt=""></div> <!--<p class="font13">添加图片</p>--> </div> </div> </div> </div>
fileChange(el) { if (!el.target.files[0].size) return; this.fileList(el.target); el.target.value = '' }, fileList(fileList) { let files = fileList.files; for (let i = 0; i < files.length; i++) { //判断是否为文件夹 if (files[i].type != '') { this.fileAdd(files[i]); } else { //文件夹处理 this.folders(fileList.items[i]); } } }, //文件夹处理 folders(files) { let _this = this; //判断是否为原生file if (files.kind) { files = files.webkitGetAsEntry(); } files.createReader().readEntries(function (file) { for (let i = 0; i < file.length; i++) { if (file[i].isFile) { _this.foldersAdd(file[i]); } else { _this.folders(file[i]); } } }); }, foldersAdd(entry) { let _this = this; entry.file(function (file) { _this.fileAdd(file) }) }, fileAdd(file) { if (this.limit !== undefined) this.limit--; if (this.limit !== undefined && this.limit < 0) return; //总大小 this.size = this.size + file.size; //判断是否为图片文件 if (file.type.indexOf('image') == -1) { this.$dialog.toast({mes: '请选择图片文件'}); } else { let reader = new FileReader(); let image = new Image(); let _this = this; reader.readAsDataURL(file); reader.onload = function () { file.src = this.result; image.onload = function () { let width = image.width; let height = image.height; file.width = width; file.height = height; _this.imgList.push({ file }); if(_this.imgList.length>=3){ $(".upload_file_box_add").css({display:'none'}) } }; image.src = file.src; } } }, delImg(index) { this.size = this.size - this.imgList[index].file.size;//总大小 this.imgList.splice(index, 1); if (this.limit !== undefined) this.limit = 3 - this.imgList.length; if(this.imgList.length<3){ $(".upload_file_box").css({display:'block'}) } },
css
input { padding: 10px 5px; text-align: right; float: right; width: auto; } span { float: left; .pd2rem(padding,20,0) } .upload_file_box { float: left; .add { .px2rem(height, 160); .px2rem(width, 160); .px2rem(margin-right, 20); .px2rem(margin-bottom, 20); position: relative; float: left; img { width: 100%; height: 100%; } .delimg { position: absolute; .px2rem(right, -21); .px2rem(top, -21); .px2rem(width,42); .px2rem(height, 42); img { .px2rem(right, 42); .px2rem(top, 42); } } } } .upload_files{ overflow: hidden; .px2rem(padding, 20); } }
upload接口调用
accounts.upload(form).then((result) => { if(result.data.code=='200'){ _self.licenseImg=result.data.data; // this.MintUI.Indicator.close(); _self.MintUI.Toast({ message: '图片上传成功', position: 'center', duration: 1500 }); _self.sendimgFlg=true }else { _self.MintUI.Toast({ message: '图片上传失败,请稍后再试', position: 'center', duration: 1500 }); _self.sendimgFlg=false _self.delImg(0) } }).catch(()=>{ _self.MintUI.Toast({ message: '图片上传失败,请稍后再试', position: 'center', duration: 1500 });