js 上传图片
<div class="block-input" style="height: 90px"> <span><i class="red">*</i>上传图片:</span> <div class="img-area" v-for="(img,index) in imgs" :key="index"> <img :src="img" style="width: 79px;height: 70px;" @click="showBig(img)"/> <a class="remove-log" @click="removeLog(img)">x</a> </div> <input type="file" id="pfile" accept="image/gif, image/jpeg,image/png, image/bmp" @change="getPhoto" style="display: none"/> <button @click="getFile" v-show="isShowBtn" class="button">报表图片</button> </div> <div v-if="showImg" class="showImg-box"> <div class="showImg-mask" @click="hiddenImg"></div> <img :src="chooseImg" style="max-height:400px;max-width: 80%;"/> </div>
getFile () { document.getElementById('pfile').click() }, getPhoto () { let pfile = document.getElementById('pfile') let f = pfile.files[0] let imgVal = pfile.value let fileName = imgVal.substring(imgVal.lastIndexOf('.') + 1).toLowerCase() if (fileName !== 'jpg' && fileName !== 'jpeg' && fileName !== 'PNG' && fileName !== 'png' && fileName !== 'bmp' && fileName !== 'gif') { alert('不支持该格式的文件!') return false } if (f.size > 1024 * 1024 * 10) { alert('上传图片大小不能大于10M!') return false } var fReader = new FileReader() fReader.readAsDataURL(f) fReader.onload = (e) => { let res = fReader.result this.imgs.push(res) if (this.imgs.length === 1) { this.isShowBtn = false } } }, removeLog (img) { this.imgs.pop() let upimgs = this.imgs for (let i = 0; i < upimgs.length; i++) { if (img === upimgs[i]) { upimgs.splice(i, 1) return } } if (upimgs.length < 1) { this.isShowBtn = true this.imgs = [] } }, showBig (img) { this.chooseImg = img this.showImg = true }, hiddenImg () { this.showImg = false },
记录平时的一些小问题~
或转载一些小知识点
学习学习