vue-el-upload 文件上传笔记

1.VUE配置 

  重点是动态action配置，和before-upload配置，使用钩子函数强行转换url

<template>
  <div>
    <el-upload class="upload-demo" :action="url" :before-upload="handleBeforeUpload">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>

export default {

  data() {
    return {
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      url: '123'
    }
  },
  mounted() {
    this.handleBeforeUpload(this.file)
  },
  methods: {
    handleBeforeUpload(file) {
      // 动态设置action属性
      return new Promise((resolve, reject) => {
        this.url = process.env.VUE_APP_BASE_API + '/file/uploadceshi' // 或者从后端获取
        resolve()
      })
    }
  }
}
</script>
<style>
</style>

 

2.后台spring-boot的controller配置 ，上传+下载

需从mvn中引用hutool

import cn.hutool.core.io.FileUtil;
import lombok.extern.slf4j.Slf4j;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;

@RestController
@Slf4j
@RequestMapping("/file")
public class FileCeshiController {
    private static final Logger log = LoggerFactory.getLogger(FileCeshiController.class);
    
    // 项目启动的ip地址
    @Value("${ip:localhost}")  // 给 ip 一个默认值，防止忘定义时报错
    String ip;

    // 项目启动的端口号
    @Value("${server.port}")
    String port;

    // System.getProperty("user.dir") 获取当前项目的根路径  此处为 D:\code_github\Dream_java\java_chatroom
    // File.separator 分隔符，即 \     （Windows 和 ios 通用）
    private static final String ROOT_PATH = System.getProperty("user.dir") + File.separator + "files";

    @PostMapping("/uploadceshi")
    public String uploadCeshi(MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename();  // 文件的原始名称    aaa.png
        log.info("文件的原始名称：{}", originalFilename);
        String mainName = FileUtil.mainName(originalFilename);  // 文件的主名称    aaa
        log.info("文件的原始主名称：{}", mainName);
        String extName = FileUtil.extName(originalFilename);  // 文件的扩展名(后缀)    .png
        log.info("文件的原始后缀：{}", extName);
        System.out.println("ROOT_PATH:"+ROOT_PATH);

        // 如果当前文件的父级目录不存在，就创建
        if(!FileUtil.exist(ROOT_PATH)){
            FileUtil.mkdir(ROOT_PATH);    // 如果当前文件的父级目录不存在，就创建
        }

        // 如果当前上传的文件已经存在了，那么这个时候我就要重命名一个文件
     // if(FileUtil.exist(ROOT_PATH + File.separator + originalFilename)){
     //    originalFilename = System.currentTimeMillis() + "-" + mainName + "." + extName;
     //    log.info("文件已经存在，重命名后的文件名：{}", originalFilename);
     //   }

        File saveFile = new File(ROOT_PATH + File.separator + originalFilename);   // 要保存的文件地址/目录
        file.transferTo(saveFile);  // 存储文件到本地的磁盘里面去
        // 返回文件的链接，这个链接就是文件的下载地址，这个下载地址就是我的后台提供出来的
        String url = "http://" + ip + ":" + port + "/file/download?fileName=" + originalFilename;
        log.info("文件的下载地址：{}", url);
        return url;
    }

    @GetMapping("/download")
    public void download(String fileName, HttpServletResponse response) throws IOException {
//        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));  // 附件下载
        // 默认格式就是预览，浏览器会根据格式进行判断，如果可以就预览，不可以就下载
//        response.addHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(fileName, "UTF-8"));  // 附件预览
        String filePath = ROOT_PATH + File.separator + fileName;
        if(!FileUtil.exist(filePath)){
            return;
        }
        byte[] bytes = FileUtil.readBytes(filePath);
        ServletOutputStream outputStream = response.getOutputStream();
        outputStream.write(bytes);    // 数组是一个字节数组，也就是文件的字节流数组
        outputStream.flush();
        outputStream.close();
    }

}