Ruoyi-vue上传下载文件

往事不堪回首..

已于 2024-01-02 16:39:20 修改

阅读量2.2k

点赞数 10

于 2023-12-11 14:45:56 首次发布

本文链接：https://blog.csdn.net/qq3892997/article/details/134925893

版权

Ruoyi 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

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-api
            http://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) { //文件名长度不能超过100
            throw 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; //附件标题 1
		  let 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});//提交到后台
  
          
        }
      });
    },



}

4. 附件回显：

//用于回显附件
    private void setFileListIfNotNull( String url, Consumer<List<El_UploadEntity>> setter) {
        if (StringUtils.isNotBlank(url)) {//附件链接不为空
            List<El_UploadEntity> fileList = new ArrayList<>();
            String fileName = new File(url).getName();//转文件再获取文件名是最简单有效的
            fileList.add(new El_UploadEntity(fileName, url));//生成一个fileList
            setter.accept(fileList); //把fileList赋值给实体，这种写法比较便利，以后有多个文件只需要把set方法作为参数传进来即可，accept就会自动赋值
        }
    }

public ReleaseRecord selectReleaseRecordById(Long id)  {
    ReleaseRecord r = releaseRecordMapper.selectReleaseRecordById(id);
    setFileListIfNotNull(r.getAttachment1(), r::setFileList1);
    //setFileListIfNotNull(r.getAttachment2(), r::setFileList2);多个附件多次调用
    return r;
}

el-upload上传组件的file-list指定的实体，传到前台需要传List<El_UploadEntity>类型才能解析

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class El_UploadEntity implements Serializable {

    private String name;
    private String url;

}

在前端中只需在根据ID获取数据的方法中把上传组件的:file-list=指定为上面r::setFileList1中的fileList1即可

重点：

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

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

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