文件上传/下载

上传

参数为对象时：1.创建vo、2.前台转json后台解析

public void uploadModel(MultipartFile[] files) throws Exception {
        if(files.length>0){
            //filePathComponent.getStampModelStampModelUploadPath()=D:aaa\\
            String strPath = filePathComponent.getStampModelStampModelUploadPath()+LocalDate.now()+"\\";
            File file2 = new File(strPath);//路径检查
            if (!file2.exists()) {//如果文件夹不存在
                file2.mkdirs();//创建文件夹
            }
            for(MultipartFile file:files){
                if(!file.isEmpty()){
                    String fileName=file.getOriginalFilename();//获取文件名
                    if(!(fileName.substring(fileName.indexOf(".")+1)).equals("xlsx")){
                        throw new Exception("文件格式不对");
                    }
                    String pathName=strPath+UUID.randomUUID().toString().replaceAll("-","")+".xlsx";//真实文件名
                    file.transferTo(new File(pathName));//创建文件
                }
            }
        }
    }

 下载

@GetMapping("/modleDownload")
    @ResponseBody
    public void modleDownloadTest(@RequestParam("id") Long id,@RequestParam("excelModelId") Long excelModelId, HttpServletResponse response) throws Exception{
            XSSFWorkbook xw=materialOutSummaryService.modleDownload(id,excelModelId);//文件流
            response.setContentType("application/vnd.ms-excel");
            response.setCharacterEncoding("utf-8");
            String fileName = URLEncoder.encode("mydict", "UTF-8").replaceAll("\\+", "%20");
            response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
            xw.write(response.getOutputStream());//导出
            logger.info("导出成功");
    }

vue

// 模板导出
export function modleDownload(query) {
  return request({
    url: "/material/in_summary/modleDownload",
    method: "get",
    responseType:'blob',//设置blob
    params: query,
  });
}

//模板导出
    exportModel() {
      this.exportDialog=false;
      modleDownload(this.modleDownloadData).then((response) => {
        // console.log("response",response)
        if (!response) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([response]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
//this.modleDownloadData.fileName=aaa.excel
        link.setAttribute('download', this.modleDownloadData.fileName)

        document.body.appendChild(link)
        link.click()
      });
    },

上传组件

<template>
  <div>
    <el-upload
      ref="upload"
      :action="uploadUrl"
      :headers="headers"
      :file-list="fileList"
      list-type="picture-card"
      :auto-upload="true"
      :limit="3"
      :on-success="uploadSuccess"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import {queryFileByIds} from "@/api/system/sysFile";
export default {
  name: "uploadImg",
  //fileIds文件id列表，fileSize上传文件数量
  props: ['fileIds','fileSize'],
  data() {
    return {
      //放大文件的url
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      //请求地址
      uploadUrl:process.env.VUE_APP_BASE_API + '/common/uploadMinio',
      // 设置上传的请求头部
      headers: {Authorization: "Bearer " + getToken()},
      // 回显文件列表
      fileList: [],
    }
  },
  watch: {
    fileIds(){
      // console.log("fileIdsQueryFileByIds",this.fileIds)
      this.fileListUtil();
    }
  },
  created() {
    // console.log("createdQueryFileByIds",this.fileIds)
    this.fileListUtil();
  },
  methods: {
    //选择文件后自动上传的回调
    uploadSuccess(res) {
      let fileIdsComponent="";
      const uploadFiles = this.$refs.upload.uploadFiles;
      for(let fileData of uploadFiles){
        fileIdsComponent=fileData.response.id+","+fileIdsComponent
      }
      // 1,2,3,4
      this.$emit('uploadImgSuccess',fileIdsComponent);
    },
    //移除图片
    handleRemove(file) {
      // 删除预览的图片
      const uploadFiles = this.$refs.upload.uploadFiles
      uploadFiles.forEach((item, index) => {
        if (item.url === file.url) uploadFiles.splice(index, 1)
      })
      let fileIdsComponent="";
      for(let fileData of uploadFiles){
        fileIdsComponent=fileData.response.id+","+fileIdsComponent
      }
      // 1,2,3,4
      this.$emit('uploadImgSuccess',fileIdsComponent);
    },
    //图片放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //回显
    fileListUtil(){
      console.log("fileListUtil",this.fileIds)
      // this.fileList= [{url:"http://rcims.lanje.cn:9000/profile/2023/03/31/9467c802270fca460ca6b5b1990d99b9_20230331134245A008.jpeg",response:{id:"3"}}];
      if(this.fileIds!==null&&this.fileIds!==""&&this.fileIds!==undefined&&this.fileList.length===0){
        queryFileByIds({ids:this.fileIds}).then(response=>{
          console.log("queryFileByIds",response)
          for(let fileDta of response.data){
            this.fileList.push({url:fileDta.storageFileUri,response:fileDta})
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>