vue elementui springboot 上傳文件

vue部分:

 <el-form-item label="附件:" prop="file">
                <el-upload
                  action=""
                  class="upload-demo"
                  accept=".jpg,.png,.xls,.xlsx,.ppt,.pdf,.doc,.docx,.txt"
                  :before-upload="beforeUpload"
                  :before-remove="beforeRemove"
                  :file-list="fileList"
                  :on-remove="afterRemove"
                  :limit="1"
                >
                  <el-button
                    slot="trigger"
                    class="el-icon-upload"
                    size="small"
                    type="primary"
                    >選取文件</el-button
                  >
                  <div slot="tip" class="el-upload__tip">
                    只能上傳小於2M的jpg/png/excel/word/txt/ppt/pdf文件
                  </div>
                </el-upload>
 </el-form-item>

相應的js:

data() {
    return {
      fileList: [], // 用來存放上傳的文件
      experiment: {      
        file: '',
      },
      },
  },

methods:{
 beforeRemove(file) {
      return this.$confirm(`確定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      // 將要上傳的值賦給experiment,當然也可以直接通過Url傳遞，看具體需求
      this.experiment.file = file;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上傳文件大小不能超過 2MB!');
      }
      return isLt2M;
    },
    afterRemove() {
      this.fileList = [];
      this.experiment.file = '';
    },
}

 

上傳觸發的方法:

 const fd = new FormData();
    fd.append('reportFile', reportFile);
    fd.append('experimentReport', JSON.stringify(experimentReport));
    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    };
    return this.$axios.$put(experimentReportUri.updateUrl, fd, config);

後臺controller:

  @PutMapping
    ResponseEntity updateReport(KeycloakAuthentication principal,
                                @RequestParam(value = "experimentReport") String experimentReport,
                                @RequestParam(value = "reportFile", required = false) MultipartFile reportFile) throws IOException;

 主要代碼:

        String staticPath = ResourceUtils.getURL("classpath:static").getPath();
        // 獲取static文件的路徑 F:/workplace/ideaPlace/imbs-e/target/classes/static
        staticPath = staticPath.substring(1);
        System.out.println("獲取static文件夾的路徑 "+staticPath);
        String fileName = reportFile.getOriginalFilename();

        //將(年-月-日)作爲文件夾
        LocalDate now = LocalDate.now();
        // now().toString()  2019-11-14
        String uploadFoldName = staticPath + File.separator + now.toString();
        //創建文件夾
        File uploadFold = new File(uploadFoldName);
        if (!uploadFold.exists() || !uploadFold.isDirectory()) {
            // 如果不存在或者不是文件夾 則創建文件夾
            uploadFold.mkdirs();
        }
        //上傳文件到指定目錄(因爲linux和windows標識符不同\和/，所以用File.separator)
        File file = new File(uploadFold + File.separator + fileName);
        reportFile.transferTo(file);
        // 獲取最後保存的路徑 F:\workplace\ideaPlace\imbs-e\target\classes\static\2019-11-13\jixu.txt
        String getSavePath = file.getAbsolutePath();
        System.out.println("文件保存的本地路徑爲:"+getSavePath);
        // 前端訪問的路徑    \static\2019-11-13\jixu.txt
        String getWebPath = getSavePath.substring(getSavePath.lastIndexOf("static") - 1);
        System.out.println("前端訪問的uri爲:"+getWebPath);