npm install qs
api文件中引入import qs from 'qs'
export function saveOrUpdate(data) {
return request({
url: 'url',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: qs.stringify(data),
})
}
使用**qs..stringify(data)**后,vue文件中不需要在进行FormData数据格式转换
ele上传组件代码
<el-upload
ref="upload"
class="upload-demo"
:action="action"
:headers="headers"
accept="image/*"
:file-list="fileList"
list-type="picture"
name="xmFile"
:auto-upload="false"
:limit="1"
:multiple="false"
:data="formData"
:on-change="change"
:on-success="success"
:on-error="error"
:on-remove="
(file, fileList) => {
this.fileList = this.fileList.filter((item) => {
return item.url !== file.url;
});
}
"
>
<el-button size="small">点击上传</el-button>
</el-upload>
/
<el-button type="primary" @click="submitForm">{{
isAdd ? "新增" : "修改"
}}</el-button>
import { getToken } from "@/utils/auth";
fileList: [],
action: process.env.VUE_APP_BASE_API + "updateUrl",
headers: {
Authorization: "Bearer " + getToken(),
},
//————————————————————————————————————
submitForm() {
this.$refs["elForm"].validate((valid) => {
if (!valid) return;
if (this.fileList.length) {
this.$refs.upload.submit();
} else {
update(this.formData).then((res) => {
this.$message({
message: this.isAdd ? "添加成功" : "修改成功",
type: "success",
});
this.addVisible = false;
this.getList();
});
}
});
},
change(file, fileList) {
this.fileList = fileList;
},
success() {
this.$message({
message: this.isAdd ? "添加成功" : "修改成功",
type: "success",
});
this.addVisible = false;
this.getList();
},
error(e) {
this.$message({
message: e,
type: "error",
});
},