java 文件表创建及前后端使用

====表结构task_file====

========前端具体到业务表单==========

 <el-form-item label="任务附件" prop="taskAttachment">
          <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">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>

        </el-form-item>

参数说明===============

data

upload: {

        // 是否禁用上传

        isUploading: false,

        // 设置上传的请求头部

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

        // 上传的地址

        url: process.env.VUE_APP_BASE_API + "/system/taskFile/upload/task",

        // 上传的文件列表

        fileList: []

      },

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

:action="upload.url"   上传后端接口

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

multiple 可多选

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

:http-request="HttpUploadFile"  增加数据

 HttpUploadFile(file) {

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

    },

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

headers="upload.headers" 请求头

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

 :file-list="upload.fileList" 文件列表

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

:on-remove="handleRemove" 移除文件操作

 handleRemove(file, fileList) {

      this.upload.fileList = fileList

      this.deleteFilePath.push(file.url)

    },

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

:on-success="handleFileSuccess" 上传成功的操作

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

    handleFileSuccess(response, file, fileList) {

      this.upload.isUploading = false;

      this.upload.fileList = []

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

    },

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

 :on-change="changeFileList" 列表长度改变的操作

  //fileList长度改变时触发

    changeFileList(file, fileList) {

      this.upload.fileList = fileList

      console.log(this.upload.fileList)

    },

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

:data="getfileData()" 加载数据

  getfileData() {

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

      return this.form.taskAttachment

    },

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

:auto-upload="false" 是否自动上传

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

==修改提交上传文件==

  this.submitUpload()

 submitUpload() {

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

      this.fileData = new FormData()

      this.$refs.upload.submit();

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

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

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

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

      var i = this.upload.fileList.length

      console.log(i)

      if (i !== 0) {

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

        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();

          }

        })

      } else {

        this.open = false;

        this.getList();

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

      }

    },

====下载====

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

        <template slot-scope="scope">

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

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

        </template>

      </el-table-column>

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

 downloadFile(item) {

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

        filePath: item.filePath,

      }, item.oFileName)

    },

===前端展现===

 <el-table-column label="任务附件" align="center">
        <template slot-scope="scope">
          <el-link type="primary" style="margin-right:10px" v-for=" item  in  scope.row.taskFileVos " :key="item.fileId"
            @click.prevent="downloadFile(item)">{{ item.oFileName }}</el-link>
        </template>

      </el-table-column>

====后端====

构造回显表单构造集成实体类供查询使用

/*文件及文件附件*/
public class TaskVo  extends SysProjectTask {
    private List<TaskFile> taskFileVos;

    public TaskVo(List<TaskFile> taskFileVos) {
        this.taskFileVos = taskFileVos;
    }

    public TaskVo() {
    }

    public List<TaskFile> getTaskFileVos() {

        return taskFileVos;
    }

    public void setTaskFileVos(List<TaskFile> taskFileVos) {

        this.taskFileVos = taskFileVos;
    }




    @Override
    public String toString() {
        return "TaskVo{" +
                "taskFileVos=" + taskFileVos +
                '}';
    }
}

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

@RestController
@RequestMapping("/taskFile")
public class TaskFileController {

    @Autowired
    private ITaskFileService taskFileService;




    /*任务附件上传*/
    @PostMapping("/upload/task")
    @Transactional(rollbackFor = Exception.class)
    public AjaxResult uploadFile(@RequestParam("files") MultipartFile[] files, @RequestParam("data") String data) {
        try {
            //这里的data是同时携带的其它信息就是前端的form里的信息,可以是用下面的json方式解析为自己相应的对象
            System.out.println(data);
            SysProjectTask sysProjectTask = JSONObject.toJavaObject(JSONObject.parseObject(data), SysProjectTask.class);
            // 上传文件路径 E:/ruoyi/uploadPath
            String filePath = RuoYiConfig.getUploadPath();
            System.out.println("========================"+filePath);
            String fileName = "";
            String url = "";
            // 上传并返回新文件名称
            AjaxResult ajax = AjaxResult.success();
            for (int i = 0; i < files.length; i++) {
                /*/profile/upload/2024/03/19/4004308e-fd63-4323-89cc-6a7c8641f148.txt*/
//                fileName = FileUploadUtils.upload(filePath, files[i]);
                fileName = FileUploadUtils.upload(filePath, files[i]);
                url = filePath+fileName;
                TaskFile taskFile = new TaskFile();
                /*任务文件名,保存的名称*/
                taskFile.setTaskName(fileName);
                /*文件保存路径*/
                taskFile.setFilePath(url);
                /*文件原名*/
                taskFile.setoFileName(files[i].getOriginalFilename());
                /*关联任务ID*/
                taskFile.setTaskId(sysProjectTask.getTaskId());
                /*文件大小*/
                taskFile.setFileSize(String.valueOf(files[i].getSize()));
                /*w文件类型*/
                taskFile.setFileType(files[i].getContentType());
                taskFile.setUploadTime(DateUtils.getNowDate());
                taskFile.setProjectId(sysProjectTask.getProjectId());
                taskFileService.insertTaskFile(taskFile);
            }
            return ajax;
        } catch (Exception e) {
            System.out.println(e.getMessage());
            return AjaxResult.error(e.getMessage());
        }
    }

    /*通过任务ID去查询任务附件名称*/
    @GetMapping("/read/{taskId}")
    @Transactional(rollbackFor = Exception.class)
    public AjaxResult readTaskFile(@PathVariable("taskId") Long taskId) {
        TaskFile taskFile = new TaskFile();
        taskFile.setTaskId(taskId);
        List<TaskFile> taskFiles = taskFileService.selectTaskFileList(taskFile);
        System.out.println(taskFiles);
        List<TaskFileVo> taskFileVos = new ArrayList<>();
        taskFiles.forEach(taskFile1 -> taskFileVos.add(new TaskFileVo(taskFile1)));
        System.out.println(taskFileVos);
        return AjaxResult.success(taskFileVos);
    }



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


    /**
     * 本地资源通用下载
     */
    @RequiresPermissions("system:task:export")
    @Log(title = "导出附件", businessType = BusinessType.EXPORT)
    @PostMapping("/download/resource")
    public void resourceDownload(String filePath, HttpServletRequest request, HttpServletResponse response) throws Exception {
        System.out.println(filePath);

        response.setCharacterEncoding("utf-8");
        response.setContentType("multipart/form-data");

        FileUtils.writeBytes(filePath, response.getOutputStream());
    }






}