若依微服务中的上传文件的前后端实现

本文主要是介绍若依微服务中的上传文件的前后端实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前端：
：limit用来控制上传文件数量的默认一

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="唯一标识" prop="hwplmid"><el-input v-model="queryParams.hwplmid" placeholder="请输入唯一标识" clearable @keyup.enter.native="handleQuery" /></el-form-item><el-form-item label="文件名" prop="filename"><el-input v-model="queryParams.filename" 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="['system:homeworkplanm: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="['system:homeworkplanm: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="['system:homeworkplanm:remove']">删除</el-button></el-col><el-col :span="1.5"><el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"v-hasPermi="['system:homeworkplanm:export']">导出</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="homeworkplanmList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="唯一标识" align="center" prop="hwplmid" /><el-table-column label="文件" align="center"><template slot-scope="scope"><a class="downa" :href="scope.row.filepath">下载</a></template></el-table-column><el-table-column label="文件名" align="center" prop="filename" /><el-table-column align="center" prop="remark"><template #header><el-tooltip class="item" effect="dark" content="这里可以自定义内容，内容尽量规范（例如：企业*——*单位*——*用处）" placement="top-start"><span class="custom-label">备注<svg-icon icon-class="helpowen"/></span></el-tooltip>  </template></el-table-column><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="['system:homeworkplanm:edit']">修改</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"v-hasPermi="['system:homeworkplanm: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="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /></el-form-item><el-form-item label="文件" prop="filepath"><el-upload ref="upload" :limit="1" :action="upload.url" :headers="upload.headers":file-list="upload.fileList" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading"@click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传bmp, gif, jpg, jpeg, png, doc, docx, xls, xlsx, ppt,pptx, html, htm, txt, rar, zip, gz, bz2, mp4, avi, rmvb, pdf文件，且不超过3GB</div></el-upload></el-form-item><el-form-item label="文件名" prop="filename"><el-input disabled v-model="form.filename" placeholder="请输入文件名" /></el-form-item></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></div>
</template><script>
import { listHomeworkplanm, getHomeworkplanm, delHomeworkplanm, addHomeworkplanm, updateHomeworkplanm, byidgetInfo } from "@/api/system/homeworkplanm";
import { getToken } from "@/utils/auth";
export default {name: "Homeworkplanm",data() {return {// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 作业方案表格数据homeworkplanmList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,filepath: null,hwplmid: null,filename: null},// 表单参数form: {},// 表单校验rules: {remark: [{ required: true, message: "描述不能为空", trigger: "blur" }],filepath: [{ required: true, message: "请选择文件", trigger: "blur" }],},// 上传参数upload: {// 是否禁用上传isUploading: false,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/file/upload",// 上传的文件列表fileList: []},};},created() {this.getList();},methods: {/** 查询作业方案列表 */getList() {this.loading = true;listHomeworkplanm(this.queryParams).then(response => {this.homeworkplanmList = response.rows;this.total = response.total;this.loading = false;});},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {createBy: null,createTime: null,updateTime: null,updateBy: null,remark: null,filepath: null,hwplmid: null,filename: 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.hwplmid)this.single = selection.length !== 1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加作业方案";this.upload.fileList = [];},/** 修改按钮操作 */handleUpdate(row) {this.reset();const createBy = row.hwplmid || this.idsbyidgetInfo(createBy).then(response => {this.form = response.data;this.open = true;this.title = "修改作业方案";});this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.hwplmid != null) {updateHomeworkplanm(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {alert(JSON.stringify(this.form))alert(this.form.hwplmid)addHomeworkplanm(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const createBys = row.hwplmid || this.ids;this.$modal.confirm('是否确认删除作业方案编号为"' + createBys + '"的数据项？').then(function () {return delHomeworkplanm(createBys);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => { });},/** 导出按钮操作 */handleExport() {this.download('system/homeworkplanm/export', {...this.queryParams}, `homeworkplanm_${new Date().getTime()}.xlsx`)},// 文件提交处理submitUpload() {this.$refs.upload.submit();},// 文件上传中处理handleFileUploadProgress(event, file, fileList) {this.upload.isUploading = true;},// 文件上传成功处理handleFileSuccess(response, file, fileList) {this.upload.isUploading = false;this.form.filepath = response.data.url;this.form.filename = response.data.name;this.msgSuccess(response.msg);}}
};
</script>
<style scoped>
.downa:link {color: #1890FF;
}.downa:hover {color: red;
}
</style>

后端
若依项目自带的详情自己下载自己去找service层去看吧

 package com.ruoyi.file.controller;import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.ruoyi.common.core.domain.R;
import com.ruoyi.common.core.utils.file.FileUtils;
import com.ruoyi.file.service.ISysFileService;
import com.ruoyi.system.api.domain.SysFile;/*** 文件请求处理* * @author ruoyi*/
@RestController
public class SysFileController
{private static final Logger log = LoggerFactory.getLogger(SysFileController.class);@Autowiredprivate ISysFileService sysFileService;/*** 文件上传请求*/@PostMapping("upload")public R<SysFile> upload(MultipartFile file){try{// 上传并返回访问地址String url = sysFileService.uploadFile(file);SysFile sysFile = new SysFile();sysFile.setName(FileUtils.getName(url));sysFile.setUrl(url);return R.ok(sysFile);}catch (Exception e){log.error("上传文件失败", e);return R.fail(e.getMessage());}}
}