若依-文件上传

发表于2021-05-21更新于2021-06-24字数统计812阅读时长6分

文件上传

文件上传是一个项目中非常常见的模块，本文简单介绍若依框架中文件上传模块（弹窗版）的代码流程（其实就是element-UI的文件上传部分）

效果展示

文件上传

上代码

按钮及事件

1
<el-button size="small" type="primary" @click="handleUpload">点击上传</el-button>

定义事件

本例将实现一个弹窗版本，因此点击上传会弹出弹窗

1
2
3
4
5
/** 上传操作 */
handleUpload() {
    this.upload.title = "上传文件";
    this.upload.open = true;
},

设计弹窗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 文件上传对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
  <el-upload
    ref="upload"
    :limit="1"
    accept=".pdf"
    :headers="upload.headers"
    :action="upload.url + '?updateSupport=' + upload.updateSupport"
    :disabled="upload.isUploading"
    :on-progress="handleFileUploadProgress"
    :on-success="handleFileSuccess"
    :auto-upload="false"
    drag
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“pdf”格式文件！</div>
  </el-upload>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitFileForm">确 定</el-button>
    <el-button @click="upload.open = false">取 消</el-button>
  </div>
</el-dialog>

这里使用到了el-upload模块，简单介绍下参数

ref：标识整个el-upload便于后续绑定

:limit：一次最多可以上传的文件数

accept：允许上传的文件格式

:headers：设置上传的请求头部

:action：上传地址

:disabled：是否弹出本地选择文件窗口

:on-progress：上传过程中的处理

:on-success：上传成功后的处理

:on-error：上传失败后的处理

:auto-upload：是否自动上传

drag：允许拖入文件

定义upload参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
upload: {
    // 是否显示弹出层（用户导入）
    open: false,
    // 弹出层标题（用户导入）
    title: "",
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的用户数据
    updateSupport: 0,
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址
    url: process.env.VUE_APP_BASE_API + "/common/upload"
},

定义处理函数

1
2
3
4
5
6
7
8
9
10
11
12
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
    this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
    console.log(file)
    this.upload.open = false;
    this.upload.isUploading = false;
    this.$refs.upload.clearFiles();
    this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
},

真正的上传函数

至此，还剩一步，将文件真正的上传至服务器，我们定义上传函数如下：

1
2
3
4
// 提交上传文件
submitFileForm() {
    this.$refs.upload.submit()
},

需要注意我们一开始定义的ref="upload"要和其他代码块中对应准确

成功后的响应结果

1
2
3
4
5
6
{
    "msg":"操作成功",
    "fileName":"/profile/upload/2021/05/21/0e07395a-9062-4906-ac7b-7677c2081042.pdf",
    "code":200,
    "url":"http://localhost:8080/profile/upload/2021/05/21/0e07395a-9062-4906-ac7b-7677c2081042.pdf"
}

响应结果

修改上传文件大小

在ruoyi-admin/src/resources/application.yml中，修改如下：

upload

在ruoyi-common/src/main/java/com/ruoyi/common/utils/file/FileUploadUtils.java中，修改如下：

max-size