前端界面显示的图片 为本地路径的图片;将数据传递给后端后,后端进行图片路径存储操作
上传图片格局
<el-col :span="12">
<span style="line-height: 40px">车辆照片上传</span>
<template>
<el-alert
title="温馨提示:点击即可修改图片,只允许上传.jpg或.png格式 **非必选**"
type="warning"
:closable="false">
</el-alert>
</template>
<!--不使用action 符号# 用http-request实现自定义上传 :http-request="httpRequest" :on-change="handleChange"-->
<el-upload
class="avatar-uploader"
action="lei"
:on-change="handleChange"
:show-file-list="false"
:http-request="httpRequest"><!--覆盖默认上传-->
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-form-item label="车辆照片路径" prop="carImg" hidden>
<el-input v-model="car.carImg" clearable></el-input>
</el-form-item>
</el-col>
<style lang="less" scoped>
.avatar-uploader {
margin-top: 20px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 178px;
height: 178px;
}
.avatar-uploader:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: flex;
}
</style>
data中需定义的数据
imageUrl: '',
tempUrl: '',
涉及方法
//将上传图片的原路径赋值给临时路径
handleChange(file, fileList) {
this.tempUrl = URL.createObjectURL(file.raw);
},
//实现图片上传功能
httpRequest(item) {
//验证图片格式大小信息
const isJPG = item.file.type == 'image/jpeg' || item.file.type == 'image/png';
const isLt2M = item.file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
//图片格式大小信息没问题 执行上传图片的方法
if (isJPG && isLt2M == true) {
// post上传图片
let App = this;
//定义FormData对象 存储文件
let mf = new FormData();
//将图片文件放入mf
mf.append('file', item.file);
App.$Api.fileUpload(mf, function (result) {
if (result.result == "true") {
App.$notify.success({
title: '温馨提示:',
message: result.message,
});
//将临时文件路径赋值给显示图片路径(前端显示的图片)
App.imageUrl = App.tempUrl;
//将后台传来的数据库图片路径赋值给car对象的图片路径
App.car.carImg = result.imgUrl;
} else {
App.$notify.error({
title: '温馨提示:',
message: result.message,
});
}
})
}
}