Ruoyi-vue上传下载文件

1. Controller

    /*** 修改文书发布记录*/@RepeatSubmit //禁止重复提交@Log(title = "文书发布记录", businessType = BusinessType.UPDATE)@PostMapping("update")   //@RequestParam("xxx")  @RequestBody   @RequestPart("xxx") 这3个注解都不能使用，否则会报错public AjaxResult edit(ReleaseRecord releaseRecord, MultipartFile uploadFile1, MultipartFile uploadFile2) throws Exception {String name1 = FileUploadUtils.uploadByPcRelease("location1", uploadFile1);String name2 = FileUploadUtils.uploadByPcRelease("location2", uploadFile2);releaseRecord.setAttachment1(name1); //上传路径保存数据库releaseRecord.setAttachment2(name2);//上传路径保存数据库return toAjax(releaseRecordService.updateReleaseRecord(releaseRecord, uploadFile1, uploadFile2));}

2. FileUploadUtils.java （不太喜欢官方那种格式，因此以下方法是复制官方的写法再改成自己的，）

// return getPathFileName(baseDir, fileName);//官方默认 返回 资源映射路径 

返回profile/ + 文件路径+文件名 （其中profile会自动隐射到yml设置的上传路径，但是前后端的端口不一致会有跨域问题，因此前端会加上process.env.VUE_APP_BASE_API作为前缀，而这个前缀代理会跳转到后台接口）
 -- 前端配置
      process.env.VUE_APP_BASE_API = 'http://localhost/dev-api'
  -- 使用代理来解决跨域问题
      http://localhost/dev-api -> http://localhost:8080
 -- 解析前端请求 /dev-api
     http://localhost/dev-api/profile/location1/yyyymmdd/xxx.pdf
 -- 此时，再将请求交给后端处理  --这样就真正的拿到文件了
      http://localhost:8080/profile/location2/yyyymmdd/xxx.pdf

 /*** 文件上传** @param baseDir 相对应用的基目录* @param file 上传的文件* @return 返回上传成功的文件映射路径（非绝对路径）* @throws FileSizeLimitExceededException 如果超出最大大小* @throws FileNameLengthLimitExceededException 文件名太长* return getPathFileName(baseDir, fileName);//官方默认 返回 资源映射路径 （前缀：profile/）//返回profile/ + 文件路径+文件名 （其中profile会自动隐射到yml设置的上传路径，但是前后端的端口不一致会有跨域问题，因此前端会加上process.env.VUE_APP_BASE_API作为前缀）-- 前端配置process.env.VUE_APP_BASE_API = 'http://localhost/dev-api'-- 使用代理来解决跨域问题http://localhost/dev-api -> http://localhost:8080-- 解析前端请求 /dev-apihttp://localhost/dev-api/profile/avatar/2021/06/17/xxx.jpeg-- 此时，再将请求交给后端处理  --这样就真正的拿到文件了http://localhost:8080/profile/avatar/2021/06/17/xxx.jpeg*/public static final String uploadByPcRelease(String baseDir, MultipartFile file) throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException, InvalidExtensionException{int fileNamelength = Objects.requireNonNull(file.getOriginalFilename()).length();if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH) { //文件名长度不能超过100throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);}//带格式的文件名String fileName = StringUtils.format("{}/{}.{}", DateUtils.dateTime(), FilenameUtils.getBaseName(file.getOriginalFilename()), getExtension(file));String absPath = getAbsoluteFile(getDefaultBaseDir() + baseDir, fileName).getAbsolutePath(); //获取实际绝对路径file.transferTo(Paths.get(absPath));//把文件 移到 绝对路径return Constants.RESOURCE_PREFIX  + baseDir + fileName; //返回映射路径 （映射路径不包含 默认路径 getDefaultBaseDir ，会自动隐射到这个默认路径）}

3. 上传组件

<el-col :span="12" ><el-form-item :label="uploadTitle1" label-width="150px" prop="uploadFile1"><template><el-upload class="upload-demo" :file-list="fileList1" action="#" :auto-upload="false" :multiple="false" v-model="form.uploadFile1":http-request="uploadFile1" :accept="fileType" ref="uploadExcel1" :on-change="changeFile1" :on-remove="handleRemove1"><el-button type="primary" >选择文件</el-button><div slot="tip" class="el-upload__tip">大小不超过10mb</div></el-upload></template></el-form-item>
</el-col>
3.1下载组件:
 <el-link type="primary" :href="downLoadUrl + form.attachment1" v-if="form.attachment1">下载</el-link>
3.2 js
export default {name: "xxx",data() {return {fileType: ".xlsx, .xls", //上传文件的类型uploadTitle1: '每日计划',fileList1:[], //附件上传列表downLoadUrl :process.env.VUE_APP_BASE_API , //默认请求前缀--解决（前端81到后端8080）跨域问题form: {},// 表单参数}}methods: {//自定义上传方法，使用上传组件的submit()后才会触发以获取文件实体uploadFile1(param) {this.form.uploadFile1 = param.file;},changeFile1(file, fileList) {if (fileList.length > 1) {fileList.splice(0, 1);}this.fileList1 = fileList;}, handleRemove1(file){this.fileList1 = [];},validationFile(){ //附件校验this.$refs.uploadExcel1.submit();  //触发上传组件提交方法uploadFile(param)let title1 = this.uploadTitle1; //附件标题 1let file1 = this.form.uploadFile1 ;if(file1 == null){ this.$modal.msgError(title1 + '附件不能为空');return false;}return true;},addFormData(form) {  //把表单元素转换成FormData类型，表单与上传文件同时提交就必须转，否则无法上传let formData = new FormData();  for (let key in form) {  //字段为null不传到后台，否则会转成string类型的null导致数据错误 ,集合类型xxxList也剔除掉，因为为null后台也会报错if (form.hasOwnProperty(key) && form[key] != null && form[key] != 'null' && key != 'xxxList') { formData.append(key, form[key]);  }  }return formData;  },/** 提交按钮 */submitForm(op, optext) {this.$refs["form"].validate(valid => { //触发表单所有项的校验规则检查if (valid) {  // 表单校验通过才执行if(!this.validationFile()){//只有发布才能上传附件，才能更改配布对象return;//附件校验不通过就结束}let formData = this.addFormData(this.form) ; //把表单对象转成FormData对象 （上传文件必须使用FormData对象）request({  url: '/update', method: 'post', data: data});//提交到后台}});},}

重点：

  1. 假如保存到数据库的路径是：/profile/aaa/20231211/bbb.xlsx ,那么前端鼠标划过下载文件显示的路径必须是 process.env.VUE_APP_BASE_API + /profile后面这一串

否则无法找到文件会一直404

2. 若想上传组件的on-change方法有效，那么limit需要删除，否则无效

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

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

相关文章

深入了解ThreadLocal：避免内存泄漏的陷阱与最佳实践

深入了解ThreadLocal：避免内存泄漏的陷阱与最佳实践

多线程编程中&#xff0c;数据共享与隔离一直是开发者需要面对的挑战之一。而Java中的ThreadLocal提供了一种优雅的解决方案&#xff0c;允许每个线程都拥有自己独立的数据副本&#xff0c;从而避免了共享数据带来的线程安全问题。然而&#xff0c;正如事物总有两面性一样&…
阅读更多...
Kimichat使用案例：将一大片无序文本内容整理成有序的Excel表格

Kimichat使用案例：将一大片无序文本内容整理成有序的Excel表格

Kimichat是一个国产的AI大模型应用。2024年10月9日&#xff0c;专注于通用人工智能领域的公司月之暗面&#xff08;Moonshot Al&#xff09;宣布在“长文本”领域实现了突破&#xff0c;推出了首个支持输入20万汉字的大模型moonshot&#xff0c;以及搭载该模型的智能助手产品Ki…
阅读更多...
ORCLE APEX和EBS集成的2个小问题

ORCLE APEX和EBS集成的2个小问题

from跳转后&#xff0c;没有跳转到指定页 从EBS菜单跳转登录后&#xff0c;没有跳转到APEX的指定页&#xff0c; 原因&#xff1a;再USER_INTERFACE定义的地方&#xff0c;HOME URL 被设置成了固定值 0&#xff0c;如上图 解决方法&#xff1a;定义APP级别的ITEM,在自动登录的…
阅读更多...
使用Dockerfile Maven Plugin 将Docker镜像Push到AWS ECR (Elastic Container Registry)

使用Dockerfile Maven Plugin 将Docker镜像Push到AWS ECR (Elastic Container Registry)

文章目录 小结问题解决AWS ECR (Elastic Container Registry)的登录问题 pull access denied for jdk, repository does not exist问题 Could not acquire image ID or digest following builddockerfile-maven-plugin 使用 参考 小结 本文记录使用Dockerfile Maven Plugin 将…
阅读更多...
通过一道CTF题目来认识一下Frida

通过一道CTF题目来认识一下Frida

本文作者&#xff1a;杉木涂鸦智能安全实验室 Frida https://github.com/frida/frida Frida是一个动态代码插入工具&#xff0c;可用于各种应用程序的调试和逆向工程。它提供了多种安装选项&#xff0c;包括Python和Node.js绑定&#xff0c;并提供了详细的命令行参数和选项。…
阅读更多...
JVM虚拟机系统性学习-运行时数据区（虚拟机栈、本地方法栈）

JVM虚拟机系统性学习-运行时数据区（虚拟机栈、本地方法栈）

虚拟机栈 虚拟机栈为每个线程所私有的&#xff0c;如下图&#xff1a; 栈帧是什么&#xff1f; 栈帧存储了方法的局部变量表、操作数栈、动态链接和方法返回地址等信息 栈内存为线程私有的空间&#xff0c;每个方法在执行时都会创建一个栈帧&#xff0c;执行该方法时&…
阅读更多...
Java的NIO工作机制

Java的NIO工作机制

文章目录 1. 问题引入2. NIO的工作方式3. Buffer的工作方式4. NIO数据访问方式 1. 问题引入 在网络通信中&#xff0c;当连接已经建立成功&#xff0c;服务端和客户端都会拥有一个Socket实例&#xff0c;每个Socket实例都有一个InputStream和OutputStream&#xff0c;并通过这…
阅读更多...
选择法排序

选择法排序

本题要求将给定的n个整数从大到小排序后输出。 输入格式&#xff1a; 输入第一行给出一个不超过10的正整数n。第二行给出n个整数&#xff0c;其间以空格分隔。 输出格式&#xff1a; 在一行中输出从大到小有序的数列&#xff0c;相邻数字间有一个空格&#xff0c;行末不得有…
阅读更多...
企业IT安全：内部威胁检测和缓解

企业IT安全：内部威胁检测和缓解

什么是内部威胁 内部威胁是指由组织内部的某个人造成的威胁&#xff0c;他们可能会造成损害或窃取数据以谋取自己的经济利益&#xff0c;造成这种威胁的主要原因是心怀不满的员工。 任何内部人员&#xff0c;无论是员工、前雇员、承包商、第三方供应商还是业务合作伙伴&#…
阅读更多...
SSL证书HTTPS保护服务

SSL证书HTTPS保护服务

SSL证书属于数字证书的其中一种&#xff0c;广泛用于https协议&#xff0c;从而可以让数据传输在加密前提下完成&#xff0c;确保HTTPS网络安全是申请SSL证书必要工作。 SSL证书是主要用于https是一种加密协议&#xff0c;仔细观察网站地址会发现目前主流的网址前面都会有http…
阅读更多...
【玩转TableAgent数据智能分析】利用TableAgent进行教育数据分析

【玩转TableAgent数据智能分析】利用TableAgent进行教育数据分析

文章目录 前言九章云极&#xff08;DataCanvas&#xff09;介绍前期准备样例数据集体验1. 样例数据集-Airbnb民宿价格&评价 体验1.1 体验一1.2 体验二 教育数据的分析&#xff08;TableAgent&ChatGLM对比&#xff09;1. 上传文件2. 数据分析与对比2.1 分析一2.1.1 Tabl…
阅读更多...
web服务器之——建立两个基于ip地址访问的网站

web服务器之——建立两个基于ip地址访问的网站

目录 准备工作&#xff1a;web服务器搭建 第一步&#xff1a;挂载 第二步&#xff1a;编辑配置文件 第三步&#xff1a;安装软件包 第四步&#xff1a;启动httpd 查看配置文件&#xff1a; 第五步&#xff1a;设置防火墙状态&#xff1a; 重启服务: 查看状态&#xff1…
阅读更多...
Leetcode—2961.双模幂运算【中等】

Leetcode—2961.双模幂运算【中等】

2023每日刷题&#xff08;五十六&#xff09; Leetcode—2961.双模幂运算 实现代码 class Solution { public:int func(int a, int b) {int ans 1;for(int i 0; i < b; i) {ans * a;ans % 10;}return ans;}int func2(int a, int b, int m) {int ans 1;for(int i 0; i …
阅读更多...
评论送书：以企业架构为中心的SABOE数字化转型五环法

评论送书：以企业架构为中心的SABOE数字化转型五环法

01 传统企业数字化转型面临诸多挑战 即将过去的2023年&#xff0c;chatGPT大模型、数据资产入表等事件的发生&#xff0c;标志着数字经济正在加速发展。数字经济是人类社会继农业经济、工业经济之后的第三种经济形态&#xff0c;将推动生产方式、生活方式和治理方式深刻变革&a…
阅读更多...
2-Spring

2-Spring

2-Spring 文章目录 2-Spring项目源码地址Spring概述Spring特点&#xff08;优点&#xff09;Spring相关学习网站基于Maven的Spring框架导入Spring的组成及拓展 Spring-IOC--原型理解IOC-原型--示例开发示例-常规开发示例-Set函数&#xff08;IOC原型&#xff09;开发示例-对比思…
阅读更多...
C++STL的list(超详解)

C++STL的list(超详解)

文章目录 前言构造函数capacitylist的访问insertswapsort 前言 看一下list, 在任意位置可以进行O(1)插入删除的操作。 它怎么实现这个东西&#xff1f;它其实就是一个带头双向循环链表。 #成员函数 构造函数 这里面的构造函数学完string和vector之后已经相当熟悉了。 capaci…
阅读更多...
axios请求拦截和响应拦截

axios请求拦截和响应拦截

Axios的请求拦截器和响应拦截器都是非常有用的工具&#xff0c;它们可以在请求发送到服务器之前或响应返回到客户端之前进行干预。 请求拦截器&#xff1a; 请求拦截器是在发送请求之前执行的&#xff0c;可以在请求拦截器中对请求进行一些预处理&#xff0c;比如设置统一的请…
阅读更多...
如何将用户有过行为的item用list形式记录下来，另外如何计算list里的个数

如何将用户有过行为的item用list形式记录下来，另外如何计算list里的个数

导语&#xff1a; 最近做项目&#xff0c;发现有些语法想一想是知道&#xff0c;但实际操作起来跟想的情况不一样哈哈。不是遇见bug就是输出的结果不是自己想要的&#xff0c;CSDN跟知乎找了很多没怎么解决&#xff0c;后面多摸索多实操终于解决&#xff01; test_data[item_…
阅读更多...
数据结构-05-跳表SkipList

数据结构-05-跳表SkipList

1-什么是跳表 跳表SkipList是一种随机化的数据结构&#xff0c;基于并联的链表&#xff0c;实现简单&#xff0c;插入、删除、查找的复杂度均为 O(logN)&#xff08;大多数情况下&#xff0c;因为是实现上是概率问题&#xff09;&#xff0c;因为其性能匹敌红黑树且实现较为简单…
阅读更多...
msvcr110.dll丢失的解决方法有哪些-常见方法教程

msvcr110.dll丢失的解决方法有哪些-常见方法教程

我们在日常使用电脑中经常遇到各种问题&#xff0c;比如系统文件丢失是最常见的&#xff0c;其中msvcr110.dll丢失也是非常常见的问题&#xff0c;那么msvcr110.dll文件为什么会丢失&#xff0c;丢失对电脑有什么影响呢&#xff0c;丢失了有什么解决方法&#xff1f;今天小编就…
阅读更多...
最新文章

Copyright @ 2022~2023