1.编写视图代码
几个a-upload组件属性讲一下
:beforeUpload 属性是上传前对文件限制
:customRequest 属性是对上传的文件处理(很重要)
以后的img标签用于展现
span标签是为了绑定删除事件
2.编写javascript中代码
beforeUploadjavascript
beforeUpload (file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/bmp' if (!isJPG) { this.$message.error('请上传图片文件'); } const isLt2M = file.size / 1024 < 1024*16 && file.size / 1024 > 10; if (!isLt2M) { this.$message.error('文件大小应在10KB~200KB之间'); } return isJPG && isLt2M },
selfUploadjava
selfUpload({ action, file, onSuccess, onError, onProgress }) { const base64 = new Promise(resolve => { const fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = () => { resolve(fileReader.result); this.model.cover = fileReader.result; }; }); },
deleteImgweb
deleteImg(e) { this.model.cover = ''; e.stopPropagation(); },
灵感来源
https://blog.csdn.net/SKY_Lake/article/details/101039707svg