SpringBoot+Vue+ElementUI实现文件上传

先上效果图

后端

// 负责文件上传
@RestController
public class FileController {
    @RequestMapping("/fileUpload")
    public String FileUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {
        // 获取文件名
        String filename = file.getOriginalFilename();
        if(filename == null||filename == ""){
            return "error";
        }
        String path = "upload";  // 上传文件的保存路径
        InputStream is = file.getInputStream(); // 获取文件的输入流
        File file1 = new File(path, filename);  // 根据路径和文件名创建文件
        FileOutputStream fos = new FileOutputStream(file1); // 获取文件的输出流
        int len = 0;
        byte[] buffer = new byte[1024];
        while ((len=is.read(buffer))!=-1){
            fos.write(buffer,0,len);
            fos.flush();
        }
        fos.close(); // 关闭输出流
        is.close();  // 关闭输入流
        if(file1.exists()){
            return "ok";
        }else {
            return "error";
        }
    }
    @RequestMapping("/delete")   // 根据文件名删除文件
    public String delete(String fileName){
        String path = "upload";
        File file = new File(path, fileName);
        if(file.exists()) {
            file.delete();
        }
        return "ok";
    }
}

修改上传文件最大值

spring:
  servlet:
    multipart:
      max-request-size: 100MB
      max-file-size: 100MB

前端

参数	说明	类型	可选值	默认值
action	必选参数，上传的地址	string	—	—
headers	设置上传的请求头部	object	—	—
multiple	是否支持多选文件	boolean	—	—
data	上传时附带的额外参数	object	—	—
name	上传的文件字段名	string	—	file
with-credentials	支持发送 cookie 凭证信息	boolean	—	false
show-file-list	是否显示已上传文件列表	boolean	—	true
drag	是否启用拖拽上传	boolean	—	false
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	—	—
on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
on-success	文件上传成功时的钩子	function(response, file, fileList)	—	—
on-error	文件上传失败时的钩子	function(err, file, fileList)	—	—
on-progress	文件上传时的钩子	function(event, file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—	—
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file)	—	—
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。	function(file, fileList)	—	—
list-type	文件列表的类型	string	text/picture/picture-card	text
auto-upload	是否在选取文件后立即进行上传	boolean	—	true
file-list	上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]	array	—	[]
http-request	覆盖默认的上传行为，可以自定义上传的实现	function	—	—
disabled	是否禁用	boolean	—	false
limit	最大允许上传个数	number	—	—
on-exceed	文件超出个数限制时的钩子	function(files, fileList)	—	-

<template>
  <div>
    <el-container>
      <el-aside width="200px">
      </el-aside>
      <el-main>
        <div CLASS="upload-demo">
          <el-upload
            ref = "upload"
            style="display: inline-block"
            action="string"
            :limit="3"
            :file-list="fileList"
            :on-error="loadFileError"
            :before-upload="beforeUpload"
            :show-file-list="true"
            :http-request="uploadFile"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            multiple
          >
            <el-button type="success">上传文件</el-button>
          </el-upload>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      fileList: [],
    }
  },
  methods:{
    // 文件上传失败
    loadFileError() {
      this.$message.error("文件上传失败！！！");
    },
    // 上传文件之前
    beforeUpload(file) {
      const extension = file.name.split(".")[1] === "txt"; // 是否以txt为后缀
      const isLt2M = file.size / 1024 / 1024 < 100;  // 文件大小是否小于100M
      if (!extension) {
        this.$message.error("上传文件的格式只能是.txt！！！");
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过100MB！！！");
      }
      return extension && isLt2M;  // 若为false则停止上传
    },
    // 上传文件
    uploadFile(param){
      const File = param.file;
      let formDataInfo = new FormData();
      formDataInfo.append("file", File); // 将文件传向后端
      axios.post("/fileUpload",formDataInfo).then((res) => {
        if(res.data=="ok"){
          this.$message.success("文件上传成功！！！");
        }else {
          this.$message.error("文件上传失败！！！");
        }
      });
    },
    // 删除文件  如果beforeUpload函数返回值为false,会自动触发handleRemove
    handleRemove(file, fileList){
      if(file!=""){
        let data = new FormData();
        data.append("fileName",file.name); // 将文件名传向后端
        axios.post("/delete",data).then(res=>{
          if(res.data=="ok"){
            this.$message.success("删除成功！！！");
          }else {
            this.$message.error("删除失败！！！");
          }
        })
      }
    },
    // 文件超出个数限制
    handleExceed(){
      this.$message.warning("超出文件个数限制！！！");
    },
  }
}
</script>

<style scoped>
.upload-demo{
  width: 620px;
  height: 150px;
}
.btn{
  margin-left: 100px;
}
</style>

实现效果