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

news/2024/2/23 15:17:52/文章来源:https://blog.csdn.net/weixin_47615289/article/details/135548973

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_926141.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI大模型预先学习笔记三:使用Assistants API快速搭建领域专属AI助手

文章目录 一、什么是AssistantsAPI二、为什么用AssistantsAPI三、Demo展示及能力介绍四、Demo框架及具体实现五、从Demo到实际应用的Gap 一、什么是AssistantsAPI 介绍 OpenAI的第一手发布者API文档&#xff0c;也就是相当于GPT的API 二、为什么用AssistantsAPI 优点 够全、…

华为数通方向HCIP-DataCom H12-831题库(判断题:1-20)

第01题 为了加快IS-IS网络中链路故障的感知速度,可以将IS-IS与BFD联动 正确 错误 答案:正确 解析: OSPF和IS-IS都可以设置与BFD联动加速链路故障检测 ,使用BFD时,可以实现毫秒级别的链路切换,所以使用IS–IS与BFD联动,可以加快IS–IS的感知速度 第02题 在OSPF中ABR会将…

MySQL表的内连和外连

文章目录 前言一、表的内连接和外连接内连接外连接左外连接右外连接 使用场景 前言 一、表的内连接和外连接 表的连接分为内连接和外连接。 内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;我们前面学习的查询都是内连接&#xff0c;也是在…

推荐几个Github高星GoLang管理系统

在Web开发领域&#xff0c;Go语言&#xff08;Golang&#xff09;以其高效、简洁、高并发等特性逐渐成为许多开发者的首选语言。有许多优秀的Go语言Web后台管理系统&#xff0c;这些项目星星众多&#xff0c;提供了丰富的功能和良好的代码质量。本文将介绍一些GitHub高星的GoLa…

工具推荐 |Devv.ai — 最懂程序员的新一代 AI 搜索引擎

介绍 伴随 GPT 的出现&#xff0c;我们可以看到越来越多的 AI 产品&#xff0c;其中也不乏针对程序员做的代码生成工具。 今天介绍的这款产品是一款针对中文开发者的 AI 搜索引擎&#xff0c;Devv.ai 使用 Devv.ai 的使用非常简单&#xff0c;就是传统的搜索场景&#xff…

传感数据分析——傅里叶滤波与小波滤波

传感数据分析——傅里叶滤波与小波滤波 文章目录 传感数据分析——傅里叶滤波与小波滤波前言一、运行环境二、Python实现总结 前言 傅里叶滤波的原理&#xff1a; 傅里叶滤波是基于傅里叶变换的一种信号处理方法&#xff0c;它的原理如下&#xff1a; 傅里叶变换&#xff1a; …

图像处理------亮度

from PIL import Imagedef change_brightness(img: Image, level: float) -> Image:"""按照给定的亮度等级&#xff0c;改变图片的亮度"""def brightness(c: int) -> float:return 128 level (c - 128)if not -255.0 < level < 25…

mysql从入门到放弃之数据库体系结构与管理

文章目录 前言一、体系结构1、mysql c/s结构介绍2、mysql实例组成3、mysqld程序运行原理3.1、mysqld守护进程结构3.2、 引入sql语句结构化的查询语言3.3、探索一条SQL语句的执行过程 二、mysql逻辑存储结构三、mysql物理存储结构3.1、innodb存储引擎的段、区、页之间的关系 四、…

CMU15-445-Spring-2023-Project #3 - Query Execution

前置知识&#xff0c;参考上一篇博客&#xff1a;CMU15-445-Spring-2023-Project #3 - 前置知识&#xff08;lec10-14 Parser&#xff1a;将SQL query转变为ASTBinder&#xff1a;将查询语句与数据库元数据进行绑定&#xff0c;验证查询的正确性和有效性Planner&#xff1a;为…

2024年美赛数学建模思路 - 案例:FPTree-频繁模式树算法

文章目录 算法介绍FP树表示法构建FP树实现代码 建模资料 ## 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模式树算法&#xff0c…

每日一练:LeeCode-144、145、94.二叉树的前中后序遍历【二叉树】

本文是力扣LeeCode-144、145、94.二叉树的前中后序遍历 学习与理解过程&#xff0c;本文仅做学习之用&#xff0c;对本题感兴趣的小伙伴可以出门左拐LeeCode前序遍历、中序遍历、后序遍历。 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序遍历。 给定一个二叉树的根…

scrapy爬虫实战

scrapy爬虫实战 Scrapy 简介主要特性示例代码 安装scrapy&#xff0c;并创建项目运行单个脚本代码示例配置itemsetting 爬虫脚本 代码解析xpath基本语法&#xff1a;路径表达式示例&#xff1a;通配符和多路径&#xff1a;函数&#xff1a;示例&#xff1a; 批量运行附录1&…

从“精益思想“看机器人的开发与应用:一场科技与效率的完美融合

在科技飞速发展的今天&#xff0c;机器人已经深入到我们的生活和工作之中&#xff0c;成为了提高效率、提升质量的重要工具。然而&#xff0c;如何让机器人的开发和利用更有效率、更精细&#xff0c;这是摆在我们面前的一道难题。此时&#xff0c;"精益思想"的出现&a…

OpenCV C++ 图像处理实战 ——《多尺度自适应Gamma矫正的低照图像增强》

OpenCV C++ 图像处理实战 ——《多尺度自适应Gamma矫正的低照图像增强》 一、结果演示二、多尺度自适应Gamma矫正的低照度图像增强2.1HSI颜色空间2.1.1 功能源码2.2 自适应于直方图分布的 Gamma 矫正2.2.1 功能源码2.3 多尺度 Retinex 分解与明度增强2.3.1 功能源码三、源码测试…

统计学-R语言-3

文章目录 前言给直方图增加正态曲线的不恰当之处直方图与条形图的区别核密度图时间序列图洛伦茨曲线计算绘制洛伦茨曲线所需的各百分比数值绘制洛伦茨曲线 练习 前言 本篇文章是介绍对数据的部分图形可视化的图型展现。 给直方图增加正态曲线的不恰当之处 需要注意的是&#…

【生存技能】git操作

先下载git https://git-scm.com/downloads 我这里是win64&#xff0c;下载了相应的直接安装版本 64-bit Git for Windows Setup 打开git bash 设置用户名和邮箱 查看设置的配置信息 获取本地仓库 在git bash或powershell执行git init&#xff0c;初始化当前目录成为git仓库…

力扣labuladong一刷day61天动态规划最小下降路径

力扣labuladong一刷day61天动态规划最优子结构 一、931. 下降路径最小和 题目链接&#xff1a;https://leetcode.cn/problems/minimum-falling-path-sum/description/ 如下图所示&#xff0c;求最小下降路径&#xff0c;定义dp[i][j]表示从最上面那行的任意位置抵达到nums[i]…

Redis分布式锁--java实现

文章目录 Redis分布式锁方案&#xff1a;SETNX EXPIRE基本原理比较好的实现会产生四个问题 几种解决原子性的方案方案&#xff1a;SETNX value值是&#xff08;系统时间过期时间&#xff09;方案&#xff1a;使用Lua脚本(包含SETNX EXPIRE两条指令)方案&#xff1a;SET的扩展…

springcloud Alibaba中gateway和sentinel联合使用

看到这个文章相信你有一定的sentinel和gateway基础了吧。 官网的gateway和sentinel联合使用有些过时了&#xff0c;于是有了这个哈哈&#xff0c;给你看看官网的&#xff1a; 才sentinel1.6&#xff0c;现在都几了啊&#xff0c;所以有些过时。 下面开始讲解&#xff1a; 首先…

【Linux】自定义shell

👑作者主页:@安 度 因 🏠学习社区:安度因 📖专栏链接:Linux 文章目录 获取命令行前置字段命令行输入解析命令行普通指令的执行子进程执行命令指令类型判断 && 内建命令总结 &&a