关于el-upload的图片上传组件的使用详解
但我们需要给后端传base64格式的字符串;所以使用自定义上传。:填写上传图片接口如果用base64方法传给后端留空就行了。记得在取到编码字符串后像后端发送请求。需要注意的组件中几个属性。
·
该组件可以实现两种上传:
- 使用组件自带的上传,上传的接口是写在标签属性action中的;
- 自定义上传,在on-change的回调方法中用写接口的形式像后端发送请求,如下;
:on-change="onChangeUpload"
用action自动上传默认给后端传的是file 格式,但我们需要给后端传base64格式的字符串;所以使用自定义上传。
需要注意的组件中几个属性
action:填写上传图片接口如果用base64方法传给后端留空就行了
on-remove:删除图片回调
on-change:图片上传回调
代码如下
uploadImage(file) {
this.file = file.raw;
if (file.size > 16777216) {//限制文件的大小
this.$Message.error(file.name + '大小超过16M!');
this.file = null //超过大小将文件清空
}else{
//读取文件的字符流
const reader = new FileReader();
//将文件读取为 DataURL 以data:开头的字符串
reader.readAsDataURL(this.file);
reader.onload = e => {
// 读取到的图片base64 数据编码 将此编码字符串传给后台即可
const code = e.target.result;
this.form.cover = code;
}
}
return false;
},
记得在取到编码字符串后像后端发送请求。
参考文章:
vue页面el-upload组件实现以base64编码上传图片 - 灰信网(软件开发博客聚合)
更多推荐
所有评论(0)