vue.js javascript ecmascript 若依表单中上传文件/图片

文章目录

效果图前端分析完整代码

后端分析修改功能的坑

效果图

我的需求的单图片上传，如果读者的需求是多图片。看完本篇之后，根据element文档把vue图片上传的部分代码进行更改就可以

前端分析

在弄这个功能之前我是不知道vue有专门FormData类型用于上传文件和数值。但是在简单了解这个类型之后，就可以很快实现上述功能。 首先是创建（点击按钮方法中），不需要提前声明, this.formData = new FormData; 然后是添加属性（上传按钮方法中），this.formData.append('key', value); 最后将整个formData进行传送。 具体代码： 1.上传图片组件

表单数据部分代码，已省略，按需加入

通过el-upload的属性 :on-change="uploadFile"，可知选择图片后调用的函数：

// 上传图片

uploadFile(item) {

this.imageUrl = URL.createObjectURL(item.raw); // 图片上传浏览器回显地址

console.log(this.imageUrl, "imageUrl")

console.log(this.formData, "formData")

this.$set(this.form, 'myIsUpload', "已上传");

// 将图片信息加入到formData中

this.formData.append('file', item.raw, item.name);

},

handleRemove() {

this.imageUrl = ""

},

讲解：item记录了上传图片的信息 this.$set(this.form, 'myIsUpload', "已上传");的作用是标记此图片已上传，至于标记为什么用this.$set，请看这篇：https://blog.csdn.net/zhang8907xiaoyue/article/details/108289603 this.formData.append('file', item.raw, item.name); 将图片信息加入到formData中

---------------------------------------------分界线--------------------------------------------- 通过确定按钮可知： @click="submitForm",提交函数： 分析： 我们表单的数据目前是存储在form中的，但是我们最终是用formData上传，所以需要将form中的属性全部加入到formData中。 加入之后，根据修改或是新增，调用相应的网络请求函数： updateAward(this.formData) addAward(this.formData)

/** 提交按钮 */

submitForm() {

this.$refs["form"].validate(valid => {

for (let key in this.form) {

if (this.form.hasOwnProperty(key)) {

if (!this.formData.has(key) && this.form[key] != 'null' && this.form[key] != null)

this.formData.append(key, this.form[key]);

}

}

if (valid) {

if (this.form.awardId != null) {

updateAward(this.formData).then(response => {

this.$modal.msgSuccess("修改成功");

this.open = false;

this.getList();

this.formData = null;

this.form.myIsUpload = null;

});

} else {

addAward(this.formData).then(response => {

this.$modal.msgSuccess("新增成功");

this.open = false;

this.getList();

this.formData = null;

this.form.myIsUpload = null;

});

}

}

});

},

/** 修改按钮操作 */

handleUpdate(row) {

this.formData = new FormData;

// 初始化图片

this.imageUrl = row.certificateImageUrl;

this.reset();

const awardId = row.awardId || this.ids

getAward(awardId).then(response => {

this.form = response.data;

this.open = true;

this.title = "修改获奖信息管理";

});

}

网络请求函数： 注意不要加headers，网上有些答案是加入了这个，但也有很多加入了报错。

// 新增获奖信息管理

export function addAward(data) {

return request({

url: '/competition/award',

method: 'post',

data: data,

// headers: {

// 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq'

// }

})

}

// 修改获奖信息管理

export function updateAward(data) {

return request({

url: '/competition/award',

method: 'put',

data: data

})

}

完整代码

vue

后端分析

后端我用的是Minio存储，但是具体大家如何存储就看需求了，存储方便比较简单，但是一定注意一个点

不要在实体类(Award)前加@RequestBody注解，要在MultipartFile 前加@RequestParam注解

@PostMapping

public AjaxResult add(Award award, @RequestParam("file") MultipartFile file) {

存储图片的代码

return toAjax(awardService.insertAward(award));

}

修改功能的坑

如果按上面代码，那么在修改时会遇到两个问题： 1：点击修改，前端提示没有上传图片 2：如果1解决，后端会提示“MultipartFile为空请求地址异常Required request part ‘file’ is not present” 解决方案： 1：原因是我们用了一个属性对是否已经上传文件进行标记，可以在实体类中写一个属性 之前我曾尝试这样解决： 但是不行，我也没有深究。如果有了解的同学，请留言啊~

2：如果在修改数据时，没有重新上传图片，那么file肯定是空的，因为我是在上传图片的方法中将file加入到formData里面的。可以在controller设置一下

写这个小功能我踩了不少坑，也看了很多博客，最后总结解决了这个问题，虽然是小功能，但花了不少时间解决BUG。 不知道有多少同学看到最后呢~

查看原文