效果
视图层
method
// 上传图片 changeImg(e) { console.log(e, ‘1111‘) var that = this var file = e.target.files[0] || e.dataTransfer.files[0] var fileSize = file.size || file.fileSize var fileName = file.name var len = e.target.classList.length console.log(file.size, ‘2111‘) if (file.name.lastIndexOf(‘.‘) === -1) { this.$message.info(‘路径不正确‘) return false } var AllImgExt = ‘.jpg|.jpeg|.gif|.bmp|.png|.swf‘ var extName = file.name.substring(file.name.lastIndexOf(‘.‘)).toLowerCase() if (AllImgExt.indexOf(extName + ‘|‘) === -1) { this.$message.info(‘非法图片格式‘) return false } if (fileSize < 3145728) { if (window.FileReader) { var reader = new FileReader() reader.readAsDataURL(file) reader.onload = (e) => { console.log(e.target + ‘img‘) console.log(e.target.result + ‘img‘) // that.$refs.imgzs.src = e.target.result if (len > 1) { that.form.wx_share_img_url = fileName that.formData.set(‘share_img‘, file) console.log(file, ‘share_img‘) // that.formData.set(‘share_img‘, e.target.result) } else { console.log(file, ‘list_img‘) that.form.extra = fileName that.formData.set(‘list_img‘, file) } $(‘#imgshow‘).get(0).src = e.target.result; that.isUploadImg = true } } } else { this.$message.info(‘图片大小超过限制‘) return false } }
注意:多个文件上传图片时使用class的长度进行判断
使用new FileReader()对象是为了实现图片预览功能
,如果需要传图片的路径给后端是用 e.target.result 读取,这个读取出来的值是base64位可以直接在页面上渲染预览图片,如果是后端需要原生的值就是传
e.target.files[0] || e.dataTransfer.files[0] 具体见后台活动列表编辑
原文:https://www.cnblogs.com/qdlhj/p/10385168.html