Vue 使用element-UI 上传图片及图片回显
问题描述: 将后台接口返回的图片,回显到页面1、html代码<el-form-item label="房间图片:" prop="images"><el-upload :action="action"list-type="picture-card":accept="accept":auto-upload="true":limit="imgLimit":multiple="isMul
·
问题描述: 将后台接口返回的图片,回显到页面
1、html代码
<el-form-item label="房间图片:" prop="images">
<el-upload :action="action"
list-type="picture-card"
:accept="accept"
:auto-upload="true"
:limit="imgLimit"
:multiple="isMultiple"
:file-list="form.images"
:show-file-list="true"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-exceed="handleExceed"
:on-error="imgUploadError">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<P style="color: #FF4D51;">注意:图片仅支持jpeg,jpg,png格式,且不超过6张!</P>
</el-form-item>
2、js代码
data(){
//form表单
form:{
images:[],
},
action: 'https://xxx.com/api/Admin/image',//上传图片接口地址
productImgs: [], //存上传成功的图片路径
isMultiple: true, //支持多图上传
imgLimit: 6,//最多可上传6张图片
dialogImageUrl: '',//点击图片查看,本地图片路径
dialogVisible: false,//点击查看图片弹框
}
methods:{
// 点击删除图片
handleRemove(file, fileList) { //移除图片
this.form.images = fileList
},
// 点击查看预览图片
handlePictureCardPreview(file) { //预览图片时调用
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 图片上传之前事件
beforeAvatarUpload(file) { //文件上传之前调用做一些拦截限制
const isJPG = true;
// const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
//判断上传的图片格式
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!');
// }
//判断图片大小
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
handleAvatarSuccess(res, file) { //图片上传成功
this.dialogImageUrl = URL.createObjectURL(file.raw);
if (res.status == 200) {
this.$message.success('图片上传成功!');
this.form.images.push(res.data.url);
} else {
this.$message.error('图片上传失败,请重新上传!');
}
},
handleExceed(file, fileList) { //图片上传超过数量限制
this.$message.error('上传图片不能超过6张!');
},
imgUploadError(err, file, fileList) { //图片上传失败调用
this.$message.error('上传图片失败!');
},
}
温馨提示:直接复制下代码即可使用,有什么不懂的欢迎留言
更多推荐
已为社区贡献11条内容
所有评论(0)