Element UI Upload

⭐今天教大家使用ElementUI的自定义上传

⭐请求一次上传多张图片

最近写项目的时候需要一次上传多张图片，使用ElementUI Upload的时候发现

如果是默认方案，上传多张图片并不是真正的一次上传多张，而是发送多次请求，一次请求携带一张图片

接下来分享一下我的解决思路

  • ElementUI版本：2.15.9
  • Vue版本：2.7.10

Html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 需要携带以下参数 -->
<!-- ref 用于获取组件触发API -->
<!-- auto-upload 关闭自动上传 -->
<!-- http-request 设置自定义上传的函数 -->
<!-- on-change 图片列表改变时触发的函数 -->
<!-- multiple 允许上传多个文件 -->
<el-upload
           ref="upload"
           :auto-upload="false"
           :http-request="uploadFile"
           :on-change="changeFileLength"
           multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">点击上传文件</div>
    </el-upload>
<!-- 上传时点击的按钮 -->
<el-button @click="upload" type="success">上传文件</el-button>

JS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
export default {
    name: "uploadCT",
    data(){
        return{
            // 上传文件的列表
            uploadFiles: [],
            // 上传文件的个数
            filesLength: 0,
            // 上传需要附带的信息
            info:{
                id:"",
                name:"",
            },
        }
    },

    methods:{
        // 修改当前文件列表长度
        changeFileLength(file, fileList){
            this.filesLength = fileList.length
        },

        // 用户点击上传调用
        async upload(){
            // 触发上传 调用配置 :http-request="uploadFile"
            // 即触发 uploadFile函数
            await this.$refs.upload.submit();
            // 上传完成后执行的操作 ...
        },

        // 该函数还是会被调用多次
        // 每次param参数传入一个文件
        uploadFile(param){
            // 将文件加入需要上传的文件列表
            this.uploadFiles.push(param.file)
            // 当uploadFiles长度等于用户需要上传的文件数时进行上传
            if (this.uploadFiles.length == this.filesLength){
                // 创建FormData上传
                let fd = new FormData()
                // 将全部文件添加至FormData中
                this.uploadFiles.forEach(file => {
                    fd.append('file', file)
                })
                // 将附加信息添加至FormData
                fd.append("id", this.info.id)
                fd.append("name", this.info.name)
                // 配置请求头
                const config = {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    }
                }
                // 上传文件
                this.$axios.post("/upload/upload_CT/", fd, config).then(res => {
                    /*上传成功处理*/
                }).catch(err => {/*报错处理*/});
            }
        }
    }
}

Vue组件完整代码

  • 请根据如下步骤配置
    1. 配置upload组件与上传文件按钮
    2. 配置changeFileLength函数
    3. 配置upload函数
    4. 配置uploadFile函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
<!-- 需要携带以下参数 -->
<!-- ref 用于获取组件触发API -->
<!-- auto-upload 关闭自动上传 -->
<!-- http-request 设置自定义上传的函数 -->
<!-- on-change 图片列表改变时触发的函数 -->
<!-- multiple 允许上传多个文件 -->
<el-upload
           ref="upload"
           :auto-upload="false"
           :http-request="uploadFile"
           :on-change="changeFileLength"
           multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">点击上传文件</div>
    </el-upload>
<!-- 上传时点击的按钮 -->
<el-button @click="upload" type="success">上传文件</el-button>
</template>

<script>
    export default {
        name: "uploadCT",
        data(){
            return{
                // 上传文件的列表
                uploadFiles: [],
                // 上传文件的个数
                filesLength: 0,
                // 上传需要附带的信息
                info:{
                    id:"",
                    name:"",
                },
            }
        },

        methods:{
            // 修改当前文件列表长度
            changeFileLength(file, fileList){
                this.filesLength = fileList.length
            },

            // 用户点击上传调用
            async upload(){
                // 触发上传 调用配置 :http-request="uploadFile"
                // 即触发 uploadFile函数
                await this.$refs.upload.submit();
                // 上传完成后执行的操作 ...
            },

            // 该函数还是会被调用多次
            // 每次param参数传入一个文件
            uploadFile(param){
                // 将文件加入需要上传的文件列表
                this.uploadFiles.push(param.file)
                // 当uploadFiles长度等于用户需要上传的文件数时进行上传
                if (this.uploadFiles.length == this.filesLength){
                    // 创建FormData上传
                    let fd = new FormData()
                    // 将全部文件添加至FormData中
                    this.uploadFiles.forEach(file => {
                        fd.append('file', file)
                    })
                    // 将附加信息添加至FormData
                    fd.append("id", this.info.id)
                    fd.append("name", this.info.name)
                    // 配置请求头
                    const config = {
                        headers: {
                            "Content-Type": "multipart/form-data",
                        }
                    }
                    // 上传文件
                    this.$axios.post("/upload/upload_CT/", fd, config).then(res => {
                        /*上传成功处理*/
                    }).catch(err => {/*报错处理*/});
                }
            }
        }
    }
</script>

上述组件就是全部配置内容啦⛄

如果对你有帮助请给我点个赞👍

如果有任何问题请留言给我😀