若依自定义文件上传下载

前端核心参数

deleteFilePath: [],

 fileData: '',

 upload: {

        // 是否禁用上传

        isUploading: false,

        // 设置上传的请求头部

        headers: { Authorization: "Bearer " + getToken() },

        // 上传的地址

        url: process.env.VUE_APP_BASE_API + "/system/ball/upload/file",

        // 上传的文件列表

        fileList: []

      },

==================

 <el-col :span="8">

            <el-form-item label="上传附件" prop="urlPath">

              <el-upload ref="upload" accept=".jpg, .png, .txt, .xlsx, .doc, .docx, .xls, .pdf, .zip, .rar"

                :action="upload.url" multiple :http-request="HttpUploadFile" :headers="upload.headers"

                :file-list="upload.fileList" :on-remove="handleRemove" :on-success="handleFileSuccess"

                :on-change="changeFileList" :data="getfileData()" :auto-upload="false" :name="upload.fileName">

                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

              </el-upload>

              <!-- <file-upload v-model="form.urlPath" /> -->

            </el-form-item>

          </el-col>

=============================

   <el-table-column label="任务附件" align="center">

          <template slot-scope="scope">

            <el-link type="primary" style="margin-right:10px" v-for=" item  in  scope.row.sysXmglFiles " :key="item.id"

              @click.prevent="downloadFile(item)">{{ item.fileName }}</el-link>

          </template>

        </el-table-column>

=========================

原表单事件

  /** 修改按钮操作 */

    handleUpdate(row) {

      this.reset();

      this.options.model.splice(this.options.model.indexOf(row.model), 1);

      const id = row.id || this.ids

      readTaskFile(row.id).then(response => {

        this.upload.fileList = response.data

        getBall(id).then(response => {

          this.upload.fileList = response.data.sysXmglFiles

          this.form = response.data;

          this.open = true;

          this.title = "修改ball";

        });

      })

    },

  /** 提交按钮 */

    submitForm() {

      this.$refs["form"].validate(valid => {

        if (valid) {

          if (this.form.inquiryId != null) {

            updateInquiry(this.form).then(response => {

              // 删除附件

              var deleteFilePaths = this.deleteFilePath;

              if (deleteFilePaths.length > 0) {

                deleteFile(deleteFilePaths);

              }

              this.submitUpload()

              this.$modal.msgSuccess("修改成功");

              this.open = false;

              this.open2 = false;

              this.getList();

            });

          } else {

            addInquiry(this.form).then(response => {

              this.form.inquiryId = response.data

              this.submitUpload()

              this.$modal.msgSuccess("新增成功");

              this.open = false;

              this.open2 = false;

              this.getList();

            });

          }

        }

      });

================

// 文件操作

    // 下载

    downloadFile(item) {

      console.log(item)

      this.download('system/ball/download/resource', {

        filePath: item.filePath,

      }, item.fileName)

    },

    //文件上传成功后的钩子函数

    handleFileSuccess(response, file, fileList) {

      this.upload.isUploading = false;

      this.upload.fileList = []

      this.$modal.msgSuccess(response.msg);

    },

    //fileList长度改变时触发

    changeFileList(file, fileList) {

      this.upload.fileList = fileList

      console.log(this.upload.fileList)

    },

    getfileData() {

      //此处的form是表单中的其它绑定值

    },

    handleRemove(file, fileList) {

      this.upload.fileList = fileList

      this.deleteFilePath.push(file.filePath)

      console.log(this.upload.fileList)

    },

    submitUpload() {

      //创建FormData对象，用于携带数据传递到后端

      this.fileData = new FormData()

      this.$refs.upload.submit();

      this.fileData.append("data", JSON.stringify(this.form));

      // console.log(this.form)

      this.fileData.append("headers", { Authorization: "Bearer " + getToken() });

      this.fileData.append("withCredentials", false)

      this.fileData.append("filename", "file");

      var i = this.fileData.get("files")

      if (i != undefined) {

        //此处执行调用发送请求

        uploadFile(this.fileData).then((res) => {

          if (res.code === 200) {

            this.upload.isUploading = false;

            this.upload.fileList = []

            // this.$modal.msgSuccess(res.msg);

            this.open = false;

            this.getList();

            this.getList2();

          }

        })

      } else {

        this.open = false;

        this.getList();

        this.getList2();

        //如果没有文件要上传在此处写逻辑

      }

    },

    HttpUploadFile(file) {

      this.fileData.append('files', file.file); // append增加数据

    },

============================

后端接口

查询赋值

@RequiresPermissions("system:ball:list")
@GetMapping("/list")
public TableDataInfo list(SysBall sysBall) {

    startPage();
    List<SysBall> list = sysBallService.selectSysBallList(sysBall);
    /*构造回显文件列表*/
    ArrayList<BallVo> ballVos = new ArrayList<>();
    for (SysBall ball : list) {
        BallVo  ballVo= new BallVo();
        BeanUtils.copyProperties(ball, ballVo);
        SysXmglFile sysXmglFile = new SysXmglFile();
        sysXmglFile.setParId(ball.getId());
        sysXmglFile.setTableName("sys_ball");
        sysXmglFile.setSonId(0L);
        /*查询附件*/
        List<SysXmglFile> sysXmglFiles = sysXmglFileService.selectSysXmglFileList(sysXmglFile);
        ballVo.setSysXmglFiles(sysXmglFiles);
        ballVos.add(ballVo);
    }
    TableDataInfo dataTable = getDataTable(ballVos);
    dataTable.setTotal(new PageInfo(list).getTotal());
    return dataTable ;
}

=============

@RequiresPermissions("system:ball:query")
@GetMapping(value = "/{id}")
public AjaxResult getInfo(@PathVariable("id") Long id) {
    SysBall ball = sysBallService.selectSysBallById(id);
    BallVo ballVo = new BallVo();
    BeanUtils.copyProperties(ball, ballVo);
    SysXmglFile sysXmglFile = new SysXmglFile();
    sysXmglFile.setParId(ball.getId());
    sysXmglFile.setTableName("sys_ball");
    sysXmglFile.setSonId(0L);
    /*查询附件*/
    List<SysXmglFile> sysXmglFiles = sysXmglFileService.selectSysXmglFileList(sysXmglFile);
    ballVo.setSysXmglFiles(sysXmglFiles);
    return success(ballVo);
}

===========================

新增输入

/*任务附件上传*/
@PostMapping("/upload/file")
@Transactional(rollbackFor = Exception.class)
public AjaxResult uploadFile(@RequestParam("files") MultipartFile[] files, @RequestParam("data") String data) {
    //这里的data是同时携带的其它信息就是前端的form里的信息,可以是用下面的json方式解析为自己相应的对象
    SysBall sysBall = JSONObject.toJavaObject(JSONObject.parseObject(data), SysBall.class);
    SysXmglFile sysXmglFile = new SysXmglFile();
    sysXmglFile.setParId(sysBall.getId());
    /*有子父级关系录入*/
    sysXmglFile.setSonId(0L);
    sysXmglFile.setTableName("sys_ball");
    return iSysXmglFileService.uploadFile(files,sysXmglFile);

}

=============

通过表单ID查询附件

/*通过球阀表ID去查询附件名称单个*/
@GetMapping("/read/{id}")
@Transactional(rollbackFor = Exception.class)
public AjaxResult readTaskFile(@PathVariable("id") Long id) {
    SysXmglFile sysXmglFile = new SysXmglFile();
    sysXmglFile.setParId(id);
    /*有子父级关系录入*/
    sysXmglFile.setSonId(0L);
    sysXmglFile.setTableName("sys_ball");
    /*文件多个*/
    List<SysXmglFile> sysXmglFiles = iSysXmglFileService.readFile(sysXmglFile);

    List<BallFileVo> ballFileVos = new ArrayList<>();
    /*转换成地址和文件名称*/
    sysXmglFiles.forEach(sysXmglFile1 -> ballFileVos.add(new BallFileVo(sysXmglFile1)));

    return AjaxResult.success(ballFileVos);
}

=================

更新附件

/*更新*/
@PostMapping("/upload/updateBallFile")
@Transactional(rollbackFor = Exception.class)
public AjaxResult deleteFile(@RequestBody List<String> filePath) {
    try {
        for (String deleteFilePath : filePath) {
            sysXmglFileService.deleteFilePath(deleteFilePath);
            FileUtils.deleteFile(deleteFilePath);
        }
        return AjaxResult.success("修改成功");
    } catch (Exception e) {
        System.out.println(e.getMessage());
        return AjaxResult.error(e.getMessage());
    }
}

==========

下载附件

@Log(title = "导出附件", businessType = BusinessType.EXPORT)
@PostMapping("/download/resource")
public void resourceDownload(String filePath, HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setCharacterEncoding("utf-8");
    response.setContentType("multipart/form-data");
    FileUtils.writeBytes(filePath, response.getOutputStream());
}