自定义 el-upload 文件上传

预计阅读时间: 小于 1 分钟

需求场景

  借助 iViewUI 来介绍的自定义 Upload 文件上传,上次是一个组件中只使用了一次文件上传。后续走后台管理系统时,又有了新的需求,同一个组件中有多个地方要用到文件上传,为了简化代码,优化代码逻辑结构,最后尝试了修改上传组件官方提供的属性值和相应的钩子函数,最终实现了同一组件中多次使用 Upload 文件上传。

代码逻辑(其余事件函数请参考 iview 文件上传)

代码示例
1<el-form-item label="上传附件">
2	<input type="hidden" v-model.trim="popForm.path" />
3	<!-- 上传文件 -->
4	<el-upload
5		:disabled="loading"
6		:action="upAction"
7		:data="upData"
8		:file-list="fileList"
9		:before-upload="beforeUpload"
10		:on-error="onError"
11		:on-success="(res, file) => onSuccess(res, file, 'popForm')"
12		:on-remove="file => onRemove(file, 'popForm')"
13	>
14		<el-button size="small" type="primary" icon="el-icon-upload el-icon--right" :loading="loading"> 上传附件 </el-button>
15	</el-upload>
16</el-form-item>

JS 代码

代码示例
1/* 上传文件 */
2beforeUpload(file) {
3    /* 0:文档文件(doc、docx、ppt、pptx)、1:视频文件(mp4)、2:压缩文件(zip、rar) */
4    let fileName = fileRename(String(file.name)); /* 文件重命名 */
5    let { accessKeyId, policy, signature, filePath } = oss;
6    Object.assign(this.upData, {
7        key: filePath[0] + fileName,
8        policy: policy,
9        OSSAccessKeyId: accessKeyId,
10        signature: signature,
11        name: fileName
12    });
13    this.loading = true;
14},
15/* 上传成功回调 */
16onSuccess(res, file, formName) {
17    this.loading = false;
18    let fileURI = this.upAction + "/" + this.upData.key;
19
20    if (formName === "popForm") {
21        this.popForm.filePath = fileURI;
22    } else if (formName === "upForm") {
23        this.upForm.url = fileURI;
24    }
25    this.$message.success("文件上传成功");
26},
27/* 移除文件 */
28onRemove(file, formName) {
29    if (formName === "popForm") {
30        this.popForm.filePath = "";
31    } else if (formName === "upForm") {
32        this.upForm.url = "";
33    }
34    this.$message.success("附件移除成功");
35},
36/* 上传失败 */
37onError(err, file) {
38    this.loading = false;
39    this.$message.error("文件上传失败,请稍后再试!");
40},
❤️

代码都是写在 vue methods 函数中的,请参考上篇文章iView 文件上传(OSS 直传)做修改。方法类似,此处做了微调。