前言

大家好,我是麦洛,由于经常在项目中遇到文件上传,采用最多的还是Element的Upload组件,在这里总结一下,留个痕迹,也希望帮到有需要的人;

一、组件使用示例

               <el-upload
                      class="upload-demo"
                      :action="upload.url"
                      accept=".docx"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      :before-upload="(file) =>beforeUpload(file,2)"
                      :on-success="handleSuccess"
                      multiple
                      :limit="3"
                      :on-exceed="handleExceed"
                      :file-list="fileList">
                    <el-button size="small" type="primary">选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">文件上传格式限定为word格式，文件大小不能超过2M</div>
                  </el-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

二、相关名词

1.action

action 用于指定文件上传地址

//一般我们的上传地址会由一个项目baseUrl和自定义的upload_url组成,curDir为自定义目录,指定文件存储到磁盘的那个目录下;
    upload:{
          url:process.env.VUE_APP_BASE_API +'/upload_url?curDir=/data'
        },
1
2
3
4

2.accept

accept 接受上传的文件类型

accept=".docx,.xls, .xlsx,.png,.jpg"
1

3.on-preview

on-preview 点击文件列表中已上传的文件时的钩子,主要用作预览文件

首先定义一个弹出框,用于展示图片

	<el-dialog :visible.sync="dialogVisible">
		<img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>
1
2
3

在钩子函数中,触发图片展示

	handlePreview(file) {
		this.dialogImageUrl = file.url;
		this.dialogVisible = true;
	},
1
2
3
4

4.on-remove

on-remove 文件列表移除文件时的钩子

当移除文件时,需要将该文件从我们数组中移除

   handleRemove(file, fileList) {
       for (let i = 0; i < this.ruleForm.attachInfo.length; i++) {
         let attach = this.ruleForm.attachInfo[i];
         if (file.name == attach.name) {
           this.form.attachInfo.splice(i, 1)
         }
       }
     },
1
2
3
4
5
6
7
8

5.before-remove

before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。

     beforeRemove(file, fileList) {
        if (file && file.status === 'success') {
          return this.$confirm(`确定移除 ${file.name}？`);
        }
      },
1
2
3
4
5

6.before-upload

before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
//可传递多个参数
:before-upload=“(file) =>beforeUpload(file,2)”

      //上传文件之前校验文件格式和大小
      beforeUpload(file,type) {
        if (type == 2) {
          //校验文件格式
          if (!fileFormat(file, ['word'])) {
            this.$message.error('只能上传word文件');
            return false;
          }
        } else{
          //校验文件格式
          if (!fileFormat(file, ['xls', 'xlsx'])) {
            this.$message.error('只能上传Excel文件');
            return false;
          }
        }
        //校验文件大小
        if (!fileSize(file, 2)) {
          this.$message.error('上传文件大小不能超过2M')
          return false
        }
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

7.on-exceed

on-exceed 文件超出个数限制时的钩子

   handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
1
2
3

8.on-success

on-success 文件上传成功时的钩子

      // 文件上传成功处理
      handleSuccess(res, file, fileList) {
        if (res.code === 0) {
          this.$message.success("文件上传成功！")
          this.imagesUrl = res.data.savePath;
          let attach = {
            realName: file.name,
            savePath: res.data.savePath,
            suffix: fileSuffix(file),
            saveName: res.data.saveName,
            url: res.data.url
          }
          this.ruleForm.attachInfo.push(attach)
        } else {
          this.$message.error("文件上传失败！");
        }
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

总结

以上就是今天要讲的内容，本文仅仅简单介绍了上传组件的使用，提供一些钩子函数常用写法,希望帮到大家