springboot+vue文件上传下载在线预览

前端代码：

      <!-- 合同附件 -->
      <div slot="main">
        <span class="sh-common-groupTitle">合同附件</span>
        <template>
          <div>
            选择文件: <input type="file" ref="fileInputRef" @change="selectFile" multiple> <!-- 使用multiple属性,可选择多个文件 -->
            <br/>
<!--            <img v-if="imgUrl" :src="imgUrl" alt="" style="width:54px;height:54px;">-->
            <el-button v-if="imgUrl" type="primary" @click="uploadFile">上传</el-button>
            <hr/>
          </div>
        </template>
        <el-row>
          <el-form ref="projectForm" :model="dataForm" v-loading="loading" :disabled="type === 'view' ? true : false">
          <el-col :offset="1" :span="20">
            <sh-rms-add-row-table :data.sync="dataForm.wjList" :tableList="wjList">
              <template slot="handleBtn">
                <el-table-column label="操作" width="80" align="center">
                  <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini" @click="downFile(scope.row)"
                    >下载</el-button
                    >
                    <el-button
                        type="primary"
                        size="mini" @click="goPreview(scope.row)"

                    >预览</el-button
                    >
                    <el-button
                        type="primary"
                        size="mini" @click="deleteWjList(scope.$index, scope.row)"
                    >删除</el-button
                    >
                  </template>
                </el-table-column>
              </template>
            </sh-rms-add-row-table>
          </el-col>
            </el-form>
        </el-row>
      </div>

downFile(row) {
  var objParam = "?id=" + row.id + "&name=" + row.fileName;  //地址后面带的参数，根据自己业务来
  window.location.href = 'http://127.0.0.1:30038/api/xcjc/contract/downloadFile' + objParam;
},

//预览
goPreview(row) {
  window.open(`${location.origin}/dev/api/xcjc/contract/download?fileName=` + row.fileName)
},

selectFile() {

  let file = this.$refs['fileInputRef'].files[0]
  console.log(file)

  // 上传前, 可以预览该图片
  let blobUrl = URL.createObjectURL(file)
  this.imgUrl = blobUrl

},

uploadFile() {

  // 因为可能选择多个文件, 所以这里是个数组
  let file = this.$refs['fileInputRef'].files[0]

  let formData = new FormData()

  formData.append('file', file) // 必须和后端的参数名相同。（我们看到了, 其实就是把blob文件给了formData的一个key）
  formData.append("type", 'avatar')
  formData.append("id",this.id)
  axiosInstance({ // 这种传参方式, 在axios的index.d.ts中可以看到
    url: '/api/xcjc/contract/upload',
    method: 'post',
    data: formData, // 直接将FormData作为data传输
    headers: {
      'a': 'b' // 可携带自定义响应头
    }
  }).then((res) => {
    if (res.code == 200) {
      this.$message({
        type: "success",
        message: res.msg,
        duration: 1000,
        onClose: () => {
          this.refreshList = true;
        },
      });
      this.$request({
        url: `/api/xcjc/contract/findWjList`,
        method: "post",
        data: {
          sysContractCode: this.dataForm.sysContractCode,
        },
      }).then((res) => {
            if (res.code == 200) {
              this.dataForm.wjList = res.data;
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          })
      // this.dataForm.wjList = res.data;

    } else {
      this.$message({
        type: "error",
        message: res.msg,
      });
    }
  })

  console.log(this.$refs['fileInputRef'].value); // C:\fakepath\cfa86972-07a1-4527-8b8a-1991715ebbfe.png
  // 上传完文件后, 将value置为空, 以避免下次选择同样的图片而不会触发input file的change事件。
  // (注意清空value后，将不能再从input file中获取file，而原先的file仍然能够使用)
  this.$refs['fileInputRef'].value = ''
},

上传后台代码：

controller

 /**
     * @param multipartFile    上传附件
     * @return
     */
    @PostMapping("upload")
    public ActionResult  addAttach(@RequestPart("file")MultipartFile multipartFile,@RequestPart("id") String id,@RequestPart("type") String type) throws IOException {
        String Path = "E:/cjk/现场监管/3hxcjcjg/xcjc-core/src/main/resources/file";
        // 获取文件名称
        System.out.println(type);
        String fileName = multipartFile.getOriginalFilename();
        // 获取文件的大小
        long fileSize = multipartFile.getSize();
        String uuid = String.valueOf(UUID.randomUUID());

        SimpleDateFormat formatter= new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        Date date = new Date(System.currentTimeMillis());
        String format = formatter.format(date);
        // 获取文件的字节输入流
        InputStream inputStream = multipartFile.getInputStream();
        multipartFile.transferTo(new File(Path + fileName));
        //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
        Map<String,String> map = new HashMap<String, String>();
        UserInfo userInfo = userProvider.get();
        String userName = userInfo.getUserName();
        map.put("createUser",userName);
        map.put("id",uuid);
        map.put("file_name",fileName);
        map.put("path",Path+fileName);
//        map.put("size",String.valueOf(fileSize));
        map.put("createTime", format);//上传日期
        String contentType = multipartFile.getContentType();//文件类型
        map.put("type",contentType);
//此句查询可以不用，因为我这里关联到其它表，所以要根据id关联
        String sysContractCode = jcContractInfoService.selectSystemContractCode(id);
        map.put("sys_contract_code",sysContractCode);
        fileService.insertFile(map);
//        List<String> list = map.keySet().stream().collect(Collectors.toList());
//        List<Map> list = new ArrayList<>();
//        list.add(map);
        return ActionResult.success(map);
    }

serveice:

// 上传文件
Integer insertFile(Map<String,String> map);

serviceImpl:

/**
 * 文件上传
 * @param map
 * @return
 */
@Override
public Integer insertFile(Map<String,String> map) {
    return fjMapper.insertfile(map);
}

mapper:

String selectSystemContractCode(String id);

mapper.xml:

<insert id="insertfile" parameterType="map">
    INSERT INTO
        xcjc_file_table (id, file_name,path,create_user,create_time,type,sys_contract_code)
    VALUES
        (#{id},#{file_name},#{path},#{createUser},#{createTime},#{type},#{sys_contract_code})
</insert>

下载后端代码：

controller：

/**
 * 附件下载
 * @param id
 * @param response
 */
@ResponseBody
@GetMapping("downloadFile")
public void getSdgsTree (@RequestParam(required = false,value = "id") String id,@RequestParam(required = false,value = "name") String name,HttpServletResponse response){
    Map map = new HashMap();
    map.put("id",id);
    map.put("name",name);
    fileService.downloadFile(map,response);
}

service：

//文件下载
void downloadFile(Map map, HttpServletResponse response);

serviceImpl:

/**
 * 附件下载
 * @param map
 * @param response
 */
@Override
public void downloadFile(Map map, HttpServletResponse response) {
    try {
        String PATH = "E:/cjk/sdxcjg/3hxcjcjg/xcjc-core/src/main/resources/file/";
        String basePath = PATH;
        // 1、定义输入流，通过输入流读取文件内容
        FileInputStream fileInputStream = new FileInputStream(new File(basePath + map.get("name")));

        // 2、通过response对象，获取到输出流
        ServletOutputStream outputStream = response.getOutputStream();

        // 3、通过response对象设置响应数据格式(image/jpeg)
        response.setContentType(String.valueOf(map.get("type"))+";charset=utf-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(String.valueOf(map.get("name")), "utf-8"));
        int len = 0;
        byte[] bytes = new byte[102400];
        while ((len = fileInputStream.read(bytes)) != -1){
            // 4、通过输入流读取文件数据，然后通过上述的输出流写回浏览器
            outputStream.write(bytes,0,len);
            // 刷新
            outputStream.flush();
        }
        // 5、关闭资源
        outputStream.close();
        fileInputStream.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

后台文件预览：

    /**
     * 附件预览
     * **/
    @GetMapping(value = "download")
    public void download(HttpServletResponse res, HttpServletResponse response,String fileName) throws Exception {
//        String fileName = "2.jpg";
        String path = "E:/cjk/现场监管/3hxcjcjg/xcjc-core/src/main/resources/file"+fileName;
//        String path = "E:/cjk/sdxcjg/3hxcjcjg/xcjc-core/src/main/resources/file/"+fileName;
        // 把二进制流放入到响应体中
        File file = new File(path);
        if (file.exists()) {
            byte[] data = null;
            FileInputStream input = new FileInputStream(file);
            data = new byte[input.available()];
            input.read(data);
            // 根据文件类型，设置文件Content-Type
            String fileType = fileName.substring(fileName.lastIndexOf(".")).toUpperCase();
            // 设置Content-Type头
            switch (fileType) {
                case ".JPG":
                    response.setContentType("image/jpeg");
                    break;
                case ".JPEG":
                    response.setContentType("image/jpeg");
                    break;
                case ".PNG":
                    response.setContentType("image/png");
                    break;
                case ".PDF":
                    response.setContentType("application/pdf");
                    break;
                case ".DOC":
                    response.setContentType("application/msword");
                    break;
                case ".txt":
                case ".DOCX":
                case ".docx":
//                case ".docx":
//                    response.setContentType("application/vnd.openxmlformats-officedocument.wordprocessingml.document");
//                    break;
                default:
                    response.setContentType("application/json");
            }
            response.getOutputStream().write(data);
            input.close();
        }
    }