Vue Element-ui 图片跟随表单一起上传
艾弘义
实现例如用户注册信息填写，商品发布等等需求时，通常会有需要上传图片的需求。这个时候我们可以使用Element-UI的el-upload组件进行图片上传。
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>
但是我们如果直接将这段代码放上去使用，不修改的话就会出现几个问题。图片一旦选择就直接通过后端上传到了数据库，如果用户想要修改上传的图片，那旧图片却已经在数据库中存在。无法实现图片与表单中的其他数据一起上传的需求。
所以为了实现图片跟随表单上传的需求，我们需要先关闭el-upload的自动上传，再将图片信息上传到一个FormData 对象中，当提交表单的时候，先将这个对象上传到后端，后端将图像存储到数据库中，并返回相应的图片信息，前端获取到这些图片信息后，赋值到相应的表单数据，再上传整张表单。
前端：
<el-form-item label="图片" prop="img">
<el-input v-model="ruleForm.img" v-if="false"></el-input>
<el-upload
action=""
ref="uploadimg"
list-type="picture-card"
:auto-upload="false"
:data="ruleForm"
:file-list="ruleForm.img"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="handleChange"
:http-request="uploadFile">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="adoptFormdialogVisible">
<img width="100%" :src="adoptFormdialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<script>
export default {
name: "Tab",
data() {
return {
dialogFormVisible: false,
adoptFormdialogVisible: false,
adoptFormdialogImageUrl:'',
classify: [],
hasLogin: false,
dialogFormVisible: false,
ruleForm: {
id: '',
name: '',
introduce: '',
price: '',
banner: '',
classify_id: '',
status: '1',
user_id: '1'
},
rules: {
name: [
{ required: true, message: '请输入标题', trigger: 'blur' },
{ min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
],
introduce: [
{ required: true, message: '请输入摘要', trigger: 'blur' }
],
price: [
{ required: true, message: '请输入价格，自动保留两位小数', trigger: 'blur' }
],
classify: [
{ required: true, message: '请选择商品类别', trigger: 'blur' }
]
},
activeTab: 'first',
showHeader: false,
formData:''
};
},
methods: {
submitForm(formName){// 用户点击上传表单后
this.$refs[formName].validate((valid) => {
if (valid) {
this.formData = new FormData()
this.$refs.uploadimg.submit();
// 先上传图片，图片存在formData中
this.$axios.post("/file/upLoad", this.formData).then( res =>{
console.log(res)
this.ruleForm.banner = res.data.data // 返回图片相关信息，例如图片名称
// 表单上传
this.$axios.post("/goods/saveGoods", this.ruleForm).then( res=> {
if(res.data.code == 200){
this.$message({
message: res.data.msg,
type: 'success'
});
//传值给父组件关闭弹框
this.$emit("func", false)
this.$refs[formName].resetFields();
}else{
this.$message.error(res.data.msg);
}
this.dialogFormVisible = false
})
}).catch( res=>{
console.log(res)
})
} else {
console.log('error submit!!');
return false;
}
});
}
</script>
图片上传工具类：
public class UploadUtils {
// 项目根路径下的目录 -- SpringBoot static 目录相当于是根路径下（SpringBoot 默认）
public final static String IMG_PATH_PREFIX = "static/imgs";
public static File getImgDirFile(){
// 构建上传文件的存放 "文件夹" 路径
String fileDirPath = new String("src/main/resources/" + IMG_PATH_PREFIX);
File fileDir = new File(fileDirPath);
if(!fileDir.exists()){
// 递归生成文件夹
fileDir.mkdirs();
}
return fileDir;
}
}
图片上传接口：修改图片名称，避免图片名称冲突导致不可上传图片，并返回图片名称
@RestController
@RequestMapping("/file")
public class FileController {
@PostMapping(value = "/upLoad")
@ResponseBody
public Result upLoad(@RequestParam(value = "file", required = false) MultipartFile[] multipartFiles){
StringBuffer sb = new StringBuffer();
File fileDir = UploadUtils.getImgDirFile();
try {
// 不传图片，此处捕获空指针异常，代码照常运行
for(int x = 0; x<multipartFiles.length; x++){
MultipartFile uploadFile = multipartFiles[x];
// 存储图片
File uploadDir = new File(fileDir.getAbsolutePath() + File.separator);
if ( uploadFile != null) {
//获得上传文件的文件名
String oldName = uploadFile.getOriginalFilename();
System.out.println("[上传的文件名]：" + oldName);
String uuid = UUID.randomUUID().toString().replace("-", "");
String newName = uuid + oldName;
System.out.println("[新文件名]：" + newName);
if (sb.toString().equals("")){
sb.append(newName);
}else {
sb.append("|" + newName);
}
System.out.println(sb.toString());
//我的文件保存在static目录下的avatar/user
File pic = new File(uploadDir, newName);
try {
//保存图片
uploadFile.transferTo(pic);
//返回成功结果，附带文件的相对路径
}catch (IOException e) {
System.out.println("=====捕获异常=====");
e.printStackTrace();
}
}
}
}catch (NullPointerException e){
System.out.println("=====捕获异常=====");
e.printStackTrace();
}
// 存储其它数据
return Result.succ(sb.toString());
}
}
表单上传接口：java
@PostMapping("saveGoods")
public Result saveGoods(@RequestBody Goods goods) {
goodsService.saveGoods(goods);
return Result.succ("成功");
}
类似资料：