vue+elementUI实现的上传和下载代码，拿着就能用

虽然官网有这方面的demo，但是毕竟写起来还是废点时间，所以把代码在这里做个备份，以后直接使用

目录

上传：这里只专注上传代码，其他的属性请参考官网

后台接口：Post

html：action后面是上传的地址"http://localhost:8065/xxx/upload"

js代码：只写了handleSuccess 上传成功方法，其他根据需要编写

下载代码：

html

js代码

---

上传：这里只专注上传代码，其他的属性请参考官网

后台接口：Post

    @PostMapping("/upload")
    public BaseResult upload(HttpServletRequest request, MultipartFile file) throws IOException {
        //上传文件代码省略
        return new BaseResult(200, "上传成功");
    }

html：action后面是上传的地址"http://localhost:8065/xxx/upload"

        
          点击上传ota文件
          
        

js代码：只写了handleSuccess 上传成功方法，其他根据需要编写

  data () {
    return {
      fileList: []
    }
  },
  methods: {
    // 文件上传的方法
    handleRemove (file, fileList) {
      // console.log(file, fileList)
    },
    handleSuccess (res, file, fileList) {
      // 上传成功
      this.fileList = fileList
      this.getTableData()
      this.$message.info(`上传成功`)
    },
    handlePreview (file) {
      // console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }

下载代码：

html

js代码

    downloadTemplate (row) {
      let a = document.createElement('a')
      a.href = process.env.VUE_APP_BASE_API + 'xxxxx/download?id=' + row.id
      a.click()
    }

后台接口：get请求

    @GetMapping("/download")
    public BaseResult download(HttpServletResponse response) throws IOException {
        OtaFile otaFile = otaFileService.findLastOtaFile();
            fileFastDfsUtil.downLoad(otaFile.getFileGroup(), otaFile.getFilePath(), otaFile.getOtaFileName(), response);
            return new BaseResult(200, "下载成功");

    }