antDesignofVue框架a-upload组件以base64位上传图片
1.编写视图代码几个a-upload组件属性讲一下:data 属性是确定几个文件可设置多个:beforeUpload 属性是上传前对文件限制:customRequest 属性是对上传的文件处理(很重要)之后的img标签用于展示span标签是为了绑定删除事件2.编写javascript中代码beforeUploadbeforeUpload (file) {con...
·
1.编写视图代码
几个a-upload组件属性讲一下
:beforeUpload 属性是上传前对文件限制
:customRequest 属性是对上传的文件处理(很重要)
之后的img标签用于展示
span标签是为了绑定删除事件
2.编写javascript中代码
beforeUpload
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
},
selfUpload
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;
};
});
},
deleteImg
deleteImg(e) {
this.model.cover = '';
e.stopPropagation();
},
灵感来源
https://blog.csdn.net/SKY_Lake/article/details/101039707
更多推荐
已为社区贡献7条内容
所有评论(0)