element ui 图片上传封装多张或单张

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<template>
  <div>
        <el-upload
        :action="action"
        ref="upload"
        list-type="picture-card"
        accept="image/*"
        :class="{hide:WhetherUpload||isShowUpload}"
        :limit="imgLimit"
        :file-list="fileList"
        :multiple="isMultiple"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-exceed="handleExceed"
        :on-error="imgUploadError"
        >
        <i class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >
            <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview"  @click="handlePictureCardPreview(file)" >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="removeIco"  class="el-upload-list__item-delete"  @click="handleRemove(file,fileList)" >
                  <i class="el-icon-delete"></i>
                </span>
            </span>
        </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
  </div>
</template>
<script>
export default {
    name: 'upload',
    //子组件通过 props方法获取父组件传递过来的值
    props: {
      action:{type:String},//action请求地址
      imgLimit:{type:Number,default: 1},//设置上传数量
      fileSize:{type:Number,default: 2},//设置图片大小
      fileListStr:'',//查看已上传图片
      removeIco:{type:Boolean,default:true},//是否显示删除按钮
      operationType:{type:Boolean,default:true},//刷新页面
      isShowUpload:{type:Boolean,default:false},//是否显示上传操作
    },
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            isMultiple: true,
            imgList:[],
            WhetherUpload:false,//是否显示上传操作
            fileList:[]  
        }
    },
    //通过watch来监听message是否改变
    watch:{
        'operationType':function(){
            // console.log(this.operationType)
            this.WhetherUpload = this.fileList.length >= this.imgLimit;
        }
    },
    // 创建完毕状态(里面是操作)
    created() {
        this.fileList=this.imageConversion(this.imgLimit,this.fileListStr);
        this.WhetherUpload = this.fileList.length >= this.imgLimit;
    },
    /**
   * 里面的方法只有被调用才会执行
   */
    methods: {
        //移除图片
        handleRemove(file, fileList) {
          console.log(fileList);
            for (let index = 0; index < fileList.length; index++) {
                if(fileList[index].uid==file.uid){
                    this.fileList.splice(index,1)  //移除数组中要删除的图片
                }   
            }
            this.WhetherUpload = this.fileList.length >= this.imgLimit;
            this.$emit('getImgList',this.fileList);
        },
        //预览图片时调用
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //文件上传之前调用做一些拦截限制
        beforeAvatarUpload(file) {
            const isJPG = true;
            const isLt2M = file.size / 1024 / 1024 < this.fileSize;
            // if (!isJPG) {
            //   this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 '+this.fileSize+'MB!');
            }
            return isJPG && isLt2M;
        },
        //图片上传成功
        handleAvatarSuccess(res, file,fileList) {
            console.log("图片上传")
            console.log(fileList);
            console.log(file);
            this.imgList=fileList;
            // this.imageUrl = URL.createObjectURL(file.raw);
            this.$emit('getImgList',fileList);
            
            this.WhetherUpload = fileList.length >= this.imgLimit;
            // console.log(this.imgList)
            // console.log(this.WhetherUpload)
        },
        //图片上传超过数量限制
        handleExceed(files, fileList) {
            this.$message.error('上传图片不能超过'+this.imgLimit+'张!');
            // console.log(files, fileList);
            this.imgList=fileList;
            this.$emit('getImgList',this.imgList);
        },
        //图片上传失败调用
        imgUploadError(err, file, fileList){
            console.log(file);
            console.log(fileList);
            console.log(err)
            this.$message.error('上传图片失败!');
            this.$emit('getImgList',fileList);
            this.WhetherUpload = fileList.length >= this.imgLimit;
        },
        /**
         * 处理获取服务地址转成本地查看
         * type:图片数量
         * parameter:图片参数
         */
        imageConversion:function(type,parameter){
            console.log(parameter)
            let imgList=[];
            if(type>1){
                if(parameter){
                    for (let i = 0; i < parameter.length; i++) {
                        let img={
                            url:parameter[i],
                            response:'',
                        }
                        imgList.push(img);
                    }
                }
                return imgList;
            }else{
                if(parameter){
                    let img={
                        url:parameter,
                        response:'',
                    }
                    imgList.push(img);
                }
                return imgList;
            }
        },
    }
}
</script>
<style>
.hide .el-upload--picture-card {
	display: none;
}
</style>

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<upload  :action="this.$picture"  :key="refresh"  :fileListStr="this.ruleForm.bootPage"                        

 @getImgList="(val)=>{this.ruleForm.bootPage=this.uploadPictureParameters(1,val)}"></upload>

this.$picture是上传图片的地址，我这里是把地址挂载到vue的实例上了，目的是为了以后维护方便

<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>启动页</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card class="box-card">
            <el-table :data="bannerList"  style="width: 100%">
                <el-table-column type="index" align="center" label="序号" width="200"></el-table-column>
                <el-table-column align="center" label="图片">
                    <template slot-scope="scope">
                        <img class="showImg" :src="scope.row.data" alt />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button @click="handRedact(scope.row.data)" type="primary" size="small">编辑</el-button>
                        <el-button @click="handleClick(scope.row.data)" type="danger" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog
            title="编辑"
            :visible.sync="dialogVisible"
            width="35%"
            :before-close="handleClose">
            <el-form
                :model="ruleForm"
                :rules="rules"
                :key="dialogVisible"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="图片" prop="bootPage">
                    <upload
                        :action="this.$picture"
                        :key="refresh"
                        :fileListStr="this.ruleForm.bootPage"
                        @getImgList="(val)=>{this.ruleForm.bootPage=this.uploadPictureParameters(1,val)}"
                    ></upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="bootPageBtn('ruleForm')">确定</el-button>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
             </el-form>
        </el-dialog>

        <el-dialog
            title="详情"
            :visible.sync="dialogVisibleBoot"
            width="50%">
           <img class="bootPageImg" :src="bootPageImg" alt="">
        </el-dialog>
    </div>
</template>
<script>
import upload from '../../components/Upload'
export default {
    components: {
        upload
    },
    data () {
        return {
            dialogVisible:false,
            dialogVisibleBoot:false,
            bannerList:[],
            bootPageImg:"",
            ruleForm: {
                bootPage: "", //轮播图地址
            },
            rules: {
                bootPage: [
                    { required: true, message: "请上传启动页", trigger: "blur" }
                ]
            },
            refresh:0
        }
    },
    created () {
        this.findBootPage()
    },
    methods: {
        async findBootPage(){
            let {data:res}=await this.$http.post('config/findBootPage')
            console.log(res);
            if (res.code==200) {
                this.bannerList.push(res)
            }
        },
        handRedact(e){
            this.dialogVisible=true
            console.log(e);
            this.ruleForm.bootPage=e
        },
        handleClick(e){
            this.dialogVisibleBoot=true
            this.bootPageImg=e
        },
        handleClose(){
            this.dialogVisible=false
        },
        bootPageBtn(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    console.log("123");
                    let {data:res}=await this.$http.post('config/updateBootPage',{bootPage:this.ruleForm.bootPage})
                    console.log(res);
                    if (res.code==200) {
                        this.dialogVisible=false
                        this.bannerList=[]
                        this.findBootPage()
                        this.$message.success(res.message)
                    }else{
                        this.$message.error(res.message)
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.dialogVisible=false
        },
         /**
         * 处理本地上传图片时所需参数
        * type:图片类型
        * parameter:图片上传集合
        */
        uploadPictureParameters: function (type, parameter) {
            let imgList = [];
            let img = "";
            if (type > 1) {
                if (parameter.length > 0) {
                for (let i = 0; i < parameter.length; i++) {
                    if (parameter[i].response) {
                    imgList.push(parameter[i].response.data.imgUrl);
                    } else {
                    imgList.push(parameter[i].url);
                    }
                }
                }
                this.refresh += 1;
                return imgList;
            } else {
                if (parameter.length > 0) {
                this.refresh += 1;
                //   this.ruleForm.imgUrl = parameter[0].response.data.imgUrl;
                return (img = parameter[0].response.data.imgUrl);
                }
                this.refresh += 1;
                return;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.box-card{
    margin-top: 20px;
    .showImg{
        width: 100;
        height: 100px;
    }
}
/deep/ .el-dialog__footer{
    text-align: left;
}
.bootPageImg{
    display: block;
    margin: auto;
}
</style>