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

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

前端：
：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());}}
}

这篇关于若依微服务中的上传文件的前后端实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---