基于若依的文件上传、下载

基于若依实现文件上传、下载

文章目录

官网其实也写了,但是我是自己改造封装了一下,再次迈向全栈的一小步。下面是官网前后端分离版本文件上传的地址:

若依官方文档

1、前端实现-文件上传

1.1 通用上传分析

首先我这里有一个书籍列表的基础页面,我在它的修改这一栏加上了文件上传,这里前端其实就是用了若依封装的一个全局文件上传的组件,如果想看它的底层逻辑可以直接main.js,我这里就直接用了(但是后来发现全局组件不能行,还得自己封装elemntui的组件upload,这里只是先分析逻辑)

注意这里只是先分析,实现还在后面,因为若依自带的通用文件上传我们不能调用自己的上传接口,保存文件信息到数据库

这里就是找到对应的修改的dialog对话框中的form加上全局组件 <file-upload v-model="form.file"/>就可以了

vue 复制代码
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       <!--这里其他不重要的字段只列举了一部分-->
        <el-form-item label="图书类型" prop="bookType">
          <el-select v-model="form.bookType" placeholder="请选择图书类型">
            <el-option label="名著" value="1"></el-option>
            <el-option label="历史" value="2"></el-option>
            <el-option label="社科" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出版日期" prop="publishDate">
          <el-date-picker clearable
            v-model="form.publishDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择出版日期">
          </el-date-picker>
        </el-form-item>
        <!--文件上传字段-->
        <el-form-item label="上传文件" prop="file">
          <file-upload v-model="form.file"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

然后我们在修改对话框中点击上传文件,就会发现它直接调用了后端通用的上传文件的接口,已经把文件上传到了服务器,并且返回了上传后的地址

java 复制代码
  /**
     * 通用上传请求(单个)
     */
    @PostMapping("/upload")
    public AjaxResult uploadFile(MultipartFile file) throws Exception
    {
        try
        {
            // 上传文件路径 ,已在配置文件配置D:/ruoyi/uploadPath
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称 这里其实就在电脑配置的地址 根据年月日可以看文件了
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("url", url);
            ajax.put("fileName", fileName);
            ajax.put("newFileName", FileUtils.getName(fileName));
            ajax.put("originalFilename", file.getOriginalFilename());
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }

上面就是FileUploadUtils.upload(filePath, file);上传后的文件,下面是通用上传接口返回的响应,自己可以先看清楚,对于这个新的文件名称fileName 其实就是去掉了前缀的配置地址然后加上了一个profile,这个是为了隐藏我们真实的配置的文件路径,把配置的地址映射为了profile

但是这里其实可能不是我们想要的,**因为我们想调用我们自己的上传接口,这样我们后端还可以对文件进行处理,比如拿到文件后缀,把文件存入数据库对应的字段等。

1.2 修改实现上传接口

所以我们只能自己基于elemntui 去做修改,这里我想上传成功后还要返显文件名称

在列表的form加一个文件名称字段,

vue 复制代码
 <el-table-column label="文件名称" align="center" prop="fileName" />

首先对新增和修改的dialog做修改

vue 复制代码
 <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!--其他字段就省略了-->
        <!--文件上传字段-->
        <el-form-item label="上传文件" >
          <!--这里上传成功后会绑定文件名到form.fileName字段传给后端的新增接口,uploadBookFile定义上传请求, :before-upload是上传前的回调,用于文件格式校验 -->
          <el-upload
            class="upload-demo"
            action="#"
            :http-request="uploadBookFile"
            :drag="true"
            :before-upload="uploadFileFun"
            :headers="upload.headers"
            :file-list="form.fileList">
            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
            <div class="el-upload__tip fontSize12 colorRed" slot="tip">上传文件格式为word或pdf或者txt,文件大小在2M以内</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

data 数据

javascript 复制代码
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
      },
      // 表单参数
      form: {
      },

javaScript方法

javascript 复制代码
import { uploadBookFile} from "@/api/system/book";

//下面是method写在里面的,  这里就是上传功能向后端发送上传请求,参数是一个二进制文件
 uploadBookFile(file){
      console.log(file.file,151454)
      // 创建formdata实例
      let formData = new window.FormData();
      // 将获取的文件通过append方法加入实例中
      formData.append("file", file.file);
     //发送axios请求
      uploadBookFile(formData)
        .then(res => {
          console.log(res)
          //拿到后端响应的文件名称反显到列表的form
          this.form.fileName = res.originalFilename
        })
    },
        
    //文件上传前的校验
    uploadFileFun(file){
      var test = /(doc|docx|pdf|txt)$/.test(file.name.split('.').pop().toLowerCase());
      if (!test) {
        this.$message.error("请上传正确的文档格式!");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 2MB!");
        return false;
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBook(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBook(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

api/book.js

javascript 复制代码
import { getToken } from "@/utils/auth";
// 上传文件
export function uploadBookFile(data) {
  return request({
    url: '/system/book/uploadFile',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'multipart/form-data',
      'Authorization': "Bearer " + getToken(),
    }
  })
}

2、后端实现-文件上传

后端其实就比较简单了,我也没做一个专门的文件表,只是在业务表里面加了一个file_name字段,表结构如下**(这里只是做文件上传,所以不需要文件路径字段,后续做文件下载就必须要文件路径字段,后面我会再修改)**

controller 这里是前端的upload组件传过来了一个二进制文件,然后后端把文件上传到服务器,并把文件名也返回给了前端,这样前端就可以对响应结果做解析,把文件名字段绑定到新增、修改的dialog里面,然后点击保存再把文件名称字段传回后端保存到数据库。

java 复制代码
/**
     * 上传文件接口
     * @param file
     * @return
     * @throws Exception
     */
    @PostMapping("/uploadFile")
    public AjaxResult uploadFile(MultipartFile file) throws Exception
    {
        try
        {
            // 上传文件路径 ,已在配置文件配置D:/ruoyi/uploadPath
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称 . "fileName": "/profile/upload/2024/07/06/紫金项目_20240706155317A001.txt",
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            //这些信息返回给前端之后,
            AjaxResult ajax = AjaxResult.success();
            ajax.put("url", url);
            ajax.put("fileName", fileName);
            //    "newFileName": "紫金项目_20240706155317A001.txt",
            ajax.put("newFileName", FileUtils.getName(fileName));
            // "originalFilename": "紫金项目.txt",用于给前端列表回显
            ajax.put("originalFilename", file.getOriginalFilename());
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }
    
    /**
     * 新增接口就是代码生成的看的,前端点击保存按钮的时候会读取Book实体类的fileName字段再保存到数据库
     */
    @PreAuthorize("@ss.hasPermi('system:book:add')")
    @Log(title = "新增", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody Book book)
    {
        return toAjax(bookService.insertBook(book));
    }

3、后端实现-文件下载

由于实现文件下载,所以必不可少的就是文件路径这个字段,所以我们还得加上文件路径这个字段,所以现在表结构如下,还得给所有的增删改查字段加上文件路径这个字段

其他的直接使用通用的文件下载接口就可以了 ,前端传一个文件路径回来,后端就可以直接下载了

前端需要传的文件路径是这样的 /profile/upload/2024/07/06/紫金项目_20240706160309A002.txt

首先前端经过代理proxy之后就会拿到ip和端口,然后后端这时候有个拦截器,它会拦截/profile,拦截之后把它再替换成配置文件中配置的绝对路径。

4、前端实现-文件下载

首先修改文件上传方法 ,加入一行 this.form.filePath = res.fileName,这样上传后,把文件路径绑定到了西新增修改的dialong,在点击保存的时候,就可以把文件路径存入数据库。后续列表查询就可以读取到当前行的文件路径了。

javascript 复制代码
    uploadBookFile(file){
      console.log(file.file,151454)
      // 创建formdata实例
      let formData = new window.FormData();
      // 将获取的文件通过append方法加入实例中
      formData.append("file", file.file);
      uploadBookFile(formData)
        .then(res => {
          console.log(res)
          // 保存到新增、修改的form里面再入数据库
          this.form.fileName = res.originalFilename
          this.form.filePath = res.fileName
        })
    },

加上下载按钮

vue 复制代码
 <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:book:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:book:remove']"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDownload(scope.row)"
          >下载</el-button>
        </template>
      </el-table-column>

在method里面加上如下方法,这里就是直接调用了通用的文件下载,这里的filePanth就是前面保存的/profile/upload/2024/07/06/紫金项目_20240706160309A002.txt

javascript 复制代码
    handleDownload(row){
      var name = row.fileName;
      var url = row.filePath;
      this.$download.resource(url,false)
    }

最后值得注意的是我目前实现的都是单文件上传和下载,多文件我后续会继续写demo

相关推荐
StayInLove19 分钟前
G1垃圾回收器日志详解
java·开发语言
对许22 分钟前
SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder“
java·log4j
无尽的大道26 分钟前
Java字符串深度解析:String的实现、常量池与性能优化
java·开发语言·性能优化
小鑫记得努力35 分钟前
Java类和对象(下篇)
java
binishuaio39 分钟前
Java 第11天 (git版本控制器基础用法)
java·开发语言·git
zz.YE41 分钟前
【Java SE】StringBuffer
java·开发语言
老友@41 分钟前
aspose如何获取PPT放映页“切换”的“持续时间”值
java·powerpoint·aspose
wrx繁星点点1 小时前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
Upaaui1 小时前
Aop+自定义注解实现数据字典映射
java
zzzgd8161 小时前
easyexcel实现自定义的策略类, 最后追加错误提示列, 自适应列宽,自动合并重复单元格, 美化表头
java·excel·表格·easyexcel·导入导出