cnpm install lrz --save-dev
需要上传的文件引入
import lrz from 'lrz'
<el-image v-if="userUpDateMessageall.picIdCardFront"
style="width: 200px; height: 200px"
:src="userUpDateMessageall.picIdCardFront" >
</el-image>
<p v-else>暂无图片</p>
下面的是按钮
<el-button type="primary" style="position: relative;overflow: hidden;">上传<i class="el-icon-upload el-icon--right"></i>
<input type="file"
style="position: absolute;top: 0;left: 0;height: 50px;opacity: 0;"
@change="tirggerFile($event ,'picIdCardFront')"
accept="image/*" />
</el-button>
tirggerFile (event ,userTypeImg) {
console.log(userTypeImg)
let _this=this
var file = event.target.files[0]
if(file.size/1024/1024>5){
this.$message({
message:'请上传小于5M的图片',
type: "error"
})
return
}
if(file.type.indexOf('image')==-1){
this.$message({
message:'不支援的文件格式',
type: "error"
})
return
}
//创建文件读取相关的变量
var imgFile;
var reader = new FileReader();
//为文件读取成功设置事件
reader.onload = function (e) {
imgFile = e.target.result;
var data= { image: imgFile }
getUserListMessageImg(data,'/UploadBase64Servlet').then((res) => {
if (res.data.status === 1) {
这里多个上传所以 做了判断
switch(userTypeImg) {
case 'picIdCardFront':
_this.userUpDateMessageall.picIdCardFront = res.data.msg
break;
case 'picIdCardBack':
_this.userUpDateMessageall.picIdCardBack = res.data.msg
break;
case 'holdPic':
_this.userUpDateMessageall.holdPic = res.data.msg
break;
case 'picAddress':
_this.userUpDateMessageall.picAddress = res.data.msg
break;
}
}else{
this.$message({
message:'上传失败',
type: "error"
})
}
})
};
lrz( file, {
quality: 0.6, // 图片压缩质量,取值0-1,默认为0.7
filedName: '', // 后端接收的字段名,默认为 'file'
}).then( (rst) => {
//正式读取文件
reader.readAsDataURL(rst.file);
})
.catch(function (err) {
// 处理失败会执行
})
.always(function () {
// 不管是成功失败,都会执行
});
},
vue上传图片 +element
于 2021-03-19 16:51:42 首次发布