若依表单中上传文件/图片
的作用是标记此图片已上传，至于标记为什么用this.$set，请看这篇：https://blog.csdn.net/zhang8907xiaoyue/article/details/108289603。我们表单的数据目前是存储在form中的，但是我们最终是用formData上传，所以需要将form中的属性全部加入到formData中。我的需求的单图片上传，如果读者的需求是多图片。写这个小功能我踩了
·
效果图
我的需求的单图片上传，如果读者的需求是多图片。看完本篇之后，根据element文档把vue图片上传的部分代码进行更改就可以
前端分析
在弄这个功能之前我是不知道vue有专门FormData类型用于上传文件和数值。但是在简单了解这个类型之后，就可以很快实现上述功能。
首先是创建（点击按钮方法中），不需要提前声明, this.formData = new FormData;
然后是添加属性（上传按钮方法中），this.formData.append('key', value);
最后将整个formData进行传送。
具体代码：
1.上传图片组件
<!-- 添加或修改获奖信息管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
表单数据部分代码，已省略，按需加入
</el-row>
<el-row>
<!-- 用于标记图片是否已上传 -->
<el-col :span="12">
<el-form-item label="获奖图片" prop="myIsUpload">
<el-input disabled v-model="form.myIsUpload" placeholder="未上传"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label-width="80px" label="上传图片">
<div >
<!--elementui的form组件-->
<el-upload
action="#"
:show-file-list="false"
:auto-upload="false"
:multiple="false"
:on-change="uploadFile"
drag
accept="image/jpg,image/jpeg,image/png">
<i v-if="imageUrl" class="el-icon-circle-close deleteImg" @click.stop="handleRemove"></i>
<img v-if="imageUrl" :src="imageUrl" class="el-upload--picture-car"/>
<div v-else>
<i class="el-icon-picture" style="margin-top: 40px; font-size: 40px; color: #999a9c"></i>
<div>上传图片</div>
<div>格式为png、jpeg或jpg</div>
</div>
</el-upload>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
通过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
<template>
<div class="app-container">
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
<el-col :span="20" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="68px">
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['competition:award:add']"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['competition:award:edit']"
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['competition:award:remove']"
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
>导入
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['competition:award:export']"
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="awardList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="#" align="center" prop="awardId"/>
<el-table-column label="竞赛组织学院" align="center" prop="deptName"/>
<el-table-column label="学号" align="center" prop="studentNo"/>
<el-table-column label="姓名" align="center" prop="studentName"/>
<el-table-column label="获奖竞赛" align="center" prop="competitionId"/>
<el-table-column label="项目名称" align="center" prop="projectName"/>
<el-table-column label="证书编号" align="center" prop="certificateNumber"/>
<el-table-column label="获奖网址" align="center" prop="awardWebsite"/>
<el-table-column label="竞赛级别" align="center" prop="competitionLevel"/>
<el-table-column label="获奖等级" align="center" prop="awardLevel"/>
<el-table-column label="获奖时间" align="center" prop="awardTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.awardTime, '{y}-{m}') }}</span>
</template>
</el-table-column>
<el-table-column label="证书图片" align="center" prop="certificateImageUrl" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.certificateImageUrl" :width="50" :height="50"/>
</template>
</el-table-column>
<!-- <el-table-column label="组织机构" align="center" prop="organization">-->
<!-- <el-upload-->
<!-- v-model:file-list="fileList"-->
<!-- class="upload-demo"-->
<!-- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
<!-- multiple-->
<!-- :on-preview="handlePreview"-->
<!-- :on-remove="handleRemove"-->
<!-- :before-remove="beforeRemove"-->
<!-- :limit="3"-->
<!-- :on-exceed="handleExceed"-->
<!-- >-->
<!-- <el-button type="primary">Click to upload</el-button>-->
<!-- </el-upload>-->
<!-- </el-table-column>-->
<el-table-column label="组织机构" align="center" prop="organization"/>
<el-table-column label="重点竞赛" align="center" prop="isMain"/>
<el-table-column label="项目涉航空类" align="center" prop="isAviation"/>
<el-table-column label="竞赛类别" align="center" prop="competitionCategory"/>
<el-table-column label="属于不降级竞赛" align="center" prop="isDemotion"/>
<el-table-column label="指导教师1" align="center" prop="teacher1Name"/>
<el-table-column label="指导教师2" align="center" prop="teacher2Name"/>
<el-table-column label="指导教师3" align="center" prop="teacher3Name"/>
<el-table-column label="团队名称" align="center" prop="teamName"/>
<el-table-column label="学院" align="center" prop="stuDeptName"/>
<el-table-column label="班级" align="center" prop="stuClassName"/>
<el-table-column label="年级" align="center" prop="stuGradeName"/>
<el-table-column label="专业" align="center" prop="stuMajorName"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['competition:award:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['competition:award:remove']"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改获奖信息管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="竞赛名称" prop="competitionId">
<el-select v-model="form.competitionId" placeholder="请选择竞赛">
<el-option
v-for="item in competitionsOption"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="form.projectName" placeholder="请输入项目名称"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="学号" prop="studentNo">
<el-input v-model="form.studentNo" placeholder="请输入内容"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="证书编号" prop="certificateNumber">
<el-input v-model="form.certificateNumber" placeholder="请输入证书编号"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="获奖网址" prop="awardWebsite">
<el-input v-model="form.awardWebsite" placeholder="请输入获奖网址"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="获奖时间" prop="awardTime">
<el-date-picker clearable
v-model="form.awardTime"
type="month"
value-format="yyyy-MM"
placeholder="请选择获奖时间">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="团队名称" prop="teamName">
<el-input v-model="form.teamName" placeholder="请输入团队名称"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="获奖等级" prop="awardLevel">
<el-select v-model="form.awardLevel" placeholder="请选择获奖等级">
<el-option
v-for="item in awardLevels"
:key="item"
:label="item"
:value="item"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="指导教师1" prop="teacher1Name">
<el-select v-model="form.teacher1No" placeholder="请选择指导教师1">
<el-option
v-for="item in teachersOption"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="指导教师2" prop="teacher2Name">
<el-select v-model="form.teacher2No" placeholder="请选择指导教师2">
<el-option
v-for="item in teachersOption"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="指导教师3" prop="teacher3Name">
<el-select v-model="form.teacher3No" placeholder="请选择指导教师3">
<el-option
v-for="item in teachersOption"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- 用于标记图片是否已上传 -->
<el-col :span="12">
<el-form-item label="获奖图片" prop="myIsUpload">
<el-input disabled v-model="form.myIsUpload" placeholder="未上传"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label-width="80px" label="上传图片">
<div id="upload2">
<!--elementui的form组件-->
<el-upload
action="#"
:show-file-list="false"
:auto-upload="false"
:multiple="false"
:on-change="uploadFile"
drag
accept="image/jpg,image/jpeg,image/png">
<i v-if="imageUrl" class="el-icon-circle-close deleteImg" @click.stop="handleRemove"></i>
<img v-if="imageUrl" :src="imageUrl" class="el-upload--picture-car"/>
<div v-else>
<i class="el-icon-picture" style="margin-top: 40px; font-size: 40px; color: #999a9c"></i>
<div>上传图片</div>
<div>格式为png、jpeg或jpg</div>
</div>
</el-upload>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</el-col>
</el-row>
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport"/>
是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
@click="importTemplate">下载模板
</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listAward,
getAward,
delAward,
addAward,
updateAward,
getTeacher,
getCompetition
} from "@/api/competition/award";
import {deleteComImg, getCompetitionImg} from "@/api/competition/Information";
import {getToken} from "@/utils/auth";
import {deptTreeSelect} from "@/api/system/user";
export default {
name: "Award",
data() {
return {
// 上传图片
formData: "",
imageUrl: "",
orderId: "",
userId: "",
userName: "",
// 导入*************
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: {Authorization: "Bearer " + getToken()},
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/competition/award/importData"
},
// 导入*************
// 树形
deptOptions: undefined,
deptName: undefined,
defaultProps: {
children: "children",
label: "label"
},
// 获奖等级
awardLevels: [
"国家级一等奖",
"国家级二等奖",
"国家级三等奖",
"国家级优秀奖",
"省级一等奖",
"省级二等奖",
"省级三等奖",
"省级优秀奖",
],
teachersOption: [],
competitionsOption: [],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 获奖信息管理表格数据
awardList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// formData: null,
// 查询参数
queryParams: {
deptId: null,
pageNum: 1,
pageSize: 10,
competitionId: null,
projectName: null,
studentId: null,
studentNo: null,
certificateNumber: null,
awardWebsite: null,
competitionLevel: null,
awardLevel: null,
awardTime: null,
certificateImageUrl: null,
teacher3No: null,
teacher2No: null,
teamName: null,
teacher1No: null,
},
// 表单参数
form: {
},
// 表单校验
rules: {
competitionId: [
{required: true, message: "竞赛名称不能为空", trigger: "blur"}
],
projectName: [
{required: true, message: "项目名称不能为空", trigger: "blur"}
],
studentNo: [
{required: true, message: "学号不能为空", trigger: "blur"}
],
certificateNumber: [
{required: true, message: "证书编号不能为空", trigger: "blur"}
],
awardWebsite: [
{required: true, message: "获奖网址不能为空", trigger: "blur"}
],
competitionLevel: [
{required: true, message: "竞赛级别不能为空", trigger: "change"}
],
awardLevel: [
{required: true, message: "获奖等级不能为空", trigger: "change"}
],
awardTime: [
{required: true, message: "获奖时间不能为空", trigger: "blur"}
],
myIsUpload: [
{required: true, message: "请上传图片", trigger: "input"}
],
},
// -------------------图片
number: 0,
uploadList: [],
dialogImageUrl: "",
dialogVisible: false,
hideUpload: false,
baseUrl: process.env.VUE_APP_BASE_API,
uploadImgUrl: process.env.VUE_APP_BASE_API + "/competition/image/multiPicturesUpload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken(),
awardId: -1,
},
fileList: [],
// -------------------图片
};
},
created() {
this.getList();
this.getTeachers();
this.getCompetitions();
this.getDeptTree();
},
methods: {
// 图片上传
// 上传图片
uploadFile(item) {
// this.formData = item.raw; // 图片文件
this.imageUrl = URL.createObjectURL(item.raw); // 图片上传浏览器回显地址
console.log(this.imageUrl, "imageUrl")
console.log(this.formData, "formData")
this.formData = new FormData;
this.$set(this.form, 'myIsUpload', "已上传");
this.formData.append('file', item.raw, item.name);
},
handleRemove() {
this.imageUrl = ""
},
// 导入**************
/** 导入按钮操作 */
handleImport() {
this.upload.title = "用户导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download('/competition/award/importTemplate', {}, `获奖信息导入模板_${new Date().getTime()}.xlsx`)
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
// 导入**************
//树形***************
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
,
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
}
,
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
});
}
,
//树形***************
getTeachers() {
getTeacher().then(res => {
this.teachersOption = res.optionInfos;
})
}
,
getCompetitions() {
getCompetition().then(res => {
this.competitionsOption = res.optionInfos;
})
}
,
/** 查询获奖信息管理列表 */
getList() {
this.loading = true;
listAward(this.queryParams).then(response => {
this.awardList = response.rows;
this.total = response.total;
this.loading = false;
});
}
,
// 取消按钮
cancel() {
this.open = false;
this.reset();
}
,
// 表单重置
reset() {
this.form = {
awardId: null,
competitionId: null,
projectName: null,
studentId: null,
studentNo: null,
certificateNumber: null,
awardWebsite: null,
competitionLevel: null,
awardLevel: null,
awardTime: null,
certificateImageUrl: null,
teacher3No: null,
teacher2No: null,
teamName: null,
teacher1No: null
};
this.resetForm("form");
}
,
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
}
,
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
}
,
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.awardId)
this.single = selection.length !== 1
this.multiple = !selection.length
}
,
/** 新增按钮操作 */
handleAdd() {
console.log("-- " + this.form.myIsUpload);
// 初始化图片
this.handleRemove();
this.reset();
this.open = true;
this.title = "添加获奖信息管理";
}
,
/** 修改按钮操作 */
handleUpdate(row) {
// 初始化图片
// console.log(row.certificateImageUrl);
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 = "修改获奖信息管理";
});
}
,
/** 提交按钮 */
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;
});
}
}
});
}
,
/** 删除按钮操作 */
handleDelete(row) {
const awardIds = row.awardId || this.ids;
this.$modal.confirm('是否确认删除获奖信息管理编号为"' + awardIds + '"的数据项？').then(function () {
return delAward(awardIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
}
,
/** 导出按钮操作 */
handleExport() {
this.download('competition/award/export', {
...this.queryParams
}, `award_${new Date().getTime()}.xlsx`)
}
},
//*********************************图片下
};
</script>
<style scoped lang="scss">
.upload-file-uploader {
margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
position: relative;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}
</style>
后端分析
后端我用的是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。
不知道有多少同学看到最后呢~
欢迎加入北京社区
更多推荐
16
0- 0
已为社区贡献1条内容
所有评论(0)