多图片上传 vue+element

前言

总结自己封装的多图片上传组件。

多图片上传核心代码：

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
    <div class="upload-multi-container">
        <el-upload multiple :data="uploadType" :on-change="handFileChange" :limit="uploadType.limit" :on-exceed="handleExceed" list-type="picture-card" ref="upload" class="upload-style" name="file" :on-remove="handleRemove" :file-list="elFileList" :headers="headers" :action="fileAddr" :before-upload="beforeFileUpload"  :on-success="handleFileSuccess">
            <i class="el-icon-plus"></i>
        </el-upload>
    </div>
</template>

<script>
    import axios from "axios"
    import uploadApi from "@/api/upload";
    export default {
        name: "",
        props:{
            uploadType:{
                type: Object,
                default: {}
            },
            fileList: Array,
        },
        data(){
            return {
                fileAddr: axios.$context+'/b/v1/resource/attachment',
                headers: {
                    authorization: this.$store.getters.token
                },
                elFileList: this.fileList,
                uploadNum: 0,
                currentUploadNum: 0
            }
        },
        methods: {
            // 获取上传图片的数量
            handFileChange(files, fileList) {
                var upload_img = document.getElementsByClassName('upload-style')
                if (upload_img && upload_img.length > 0) {
                    var upload = upload_img[0].getElementsByTagName('input')
                    if (upload && upload.length > 0 && upload[0].files && upload[0].files.length > 0) {
                        this.uploadNum = upload[0].files.length
                    }
                }
            },
            // 获取文件后缀名
            extname(filename) {
                if(!filename||typeof filename!='string'){
                    return false
                };
                let a = filename.split('').reverse().join('');
                let b = a.substring(0,a.search(/\./)).split('').reverse().join('');
                return b
            },
            //文件上传之前
            beforeFileUpload(file) {
                let extArr = ['jpg','png','jpeg']
                let extension = false
                extArr.forEach((element) => {
                    if (this.extname(file.name).toLowerCase() === element.toLowerCase()) {
                        extension = true
                        return
                    }
                })
                const isLt10M = file.size / 1024 / 1024 < 10;
                if (!extension) {
                    this.$message.error('请上传图片!');
                }
                if (!isLt10M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isLt10M && extension;
            },
            //文件上传成功
            handleFileSuccess(res,file,fileList){
                this.$refs.upload.clearFiles();
                if(res.code === 200){
                    this.elFileList = fileList
                    this.currentUploadNum++
                    if(this.uploadNum > 1){
                        if(this.currentUploadNum == this.uploadNum){
                            this.$emit('getFileList', this.elFileList);
                            this.$message({
                                type: 'success',
                                message: res.msg
                            });
                        }
                    }else{
                        this.$emit('getFileList', this.elFileList);
                        if(this.currentUploadNum == this.uploadNum){
                            this.$message({
                                type: 'success',
                                message: res.msg
                            });
                        }
                    }

                }else{
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            },
            handleRemove(file, fileList) {
                if (file && file.status==="success") {
                    this.elFileList = fileList
                    this.$emit('getFileList', this.elFileList);
                    if(!file.response && !file.id){
                        return
                    }else{
                        let deleteId = undefined
                        if(file.response){
                            deleteId = file.response.data.id
                        }else{
                            deleteId = file.id
                        }
                        uploadApi.delImg(deleteId).then((res) => {
                            if (res.code === 204) {
                                this.$message.success(res.msg);
                            } else {
                                this.$message.error(res.msg);
                            }
                        }).catch((res) => {
                        })
                    }
                }
            },
            handleExceed() {
                this.$message.error(`当前限制选择 ${this.uploadType.limit} 个文件`);
            },
        }
    }
</script>

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//uploadType 后端规定的上传类型
//coverUrl 给组件传的值，回显用的
//getFileList 子组件传给父组件的值
<upload-img-multi v-if="showComponent" :uploadType="uploadType" :fileList="imgUrls" @getFileList="getImgUrls"></upload-img-multi>

methods:{
   getImgUrls(val){
      console.log(val)
      if(val.length !== 0){
          let imgArr = []
          val.forEach((item) => {
            imgArr.push(item.response.data.id)
          })
          this.imgUrls = imgArr;
      }
   },
}

顺便给出当个图片上传封装的组件：

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!--上传一个图像，比如头像、封面-->
<template>
  <div class="upload-container">
    <el-upload :data="uploadType" :show-file-list="false" list-type="picture-card" ref="upload" class="upload-style" name="file" :headers="headers" :action="fileAddr" :before-upload="beforeFileUpload"  :on-success="handleFileSuccess">
      <el-image v-if="url" :src="url" class="avatar" fit="contain"></el-image>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
  import axios from "axios"
  export default {
    name: "",
    props:{
      uploadType:{
        type: Object,
        default: {}
      },
      imageUrls: {
        type: String,
        default: ''
      }
    },
    data(){
      return {
        fileAddr: axios.$context+'/b/v1/resource/attachment',
        headers: {
          authorization: this.$store.getters.token
        },
        url: this.imageUrls
      }
    },
    methods: {
      // 获取文件后缀名
      extname(filename) {
        if(!filename||typeof filename!='string'){
          return false
        };
        let a = filename.split('').reverse().join('');
        let b = a.substring(0,a.search(/\./)).split('').reverse().join('');
        return b
      },
      //文件上传之前
      beforeFileUpload(file) {
        let extArr = ['jpg','png','jpeg']
        let extension = false
        extArr.forEach((element) => {
          if (this.extname(file.name).toLowerCase() === element.toLowerCase()) {
            extension = true
            return
          }
        })
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (!extension) {
          this.$message.error('请上传图片!');
        }
        if (!isLt10M) {
          this.$message.error('上传图片大小不能超过10MB!');
        }
        return isLt10M && extension;
      },
      //文件上传成功
      handleFileSuccess(res){
        this.$refs.upload.clearFiles();
        if(res.code === 200){
          this.url = res.data.url
          this.$emit('getFileList', this.url);
          this.$message({
            type: 'success',
            message: '导入成功!'
          });
        }else{
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .upload-container{
    .upload-style{
      position: relative;
      color: #27A3FF;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      line-height: inherit;
      ::v-deep .el-upload--picture-card{
        width: 100%;
        height: 100%;
        border-radius: inherit;
        line-height: inherit;
        box-sizing: content-box;
        i{
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          width: 28px;
          height: 28px;
        }
      }
    }
    .avatar{
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
  }
</style>

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
//uploadType 后端规定的上传类型
//coverUrl 给组件传的值，回显用的
//getFileList 子组件传给父组件的值
<upload-img-single v-if="showComponent" class="cover-style" :uploadType="uploadType" :imageUrls="coverUrl" @getFileList="getCoverUrl"></upload-img-single>

methods:{
    getCoverUrl(val){
      console.log(val)
      if(val){
         this.coverUrl = val
      }
    }
}
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Whittney <br>我就是我，不一眼的烟火！*_*<br><br>