vue 上传图片组件封装

<template>
    <div>
        <div class="img_wrap">
            <div class="img_w pr" v-for="file of imgWrap" :key="file.uid">
                <img v-if="file.name.substring(file.name.lastIndexOf('.')+1)==='pdf'" src="@/assets/images/pdf.png" alt="">
                <img v-else :src="file.url" alt="">
                <div class="del_img pa">
                    <span @click="handleRemove(file)"><i class="el-icon-delete"></i></span>
                </div>
            </div>
            <el-upload action="fakeaction" ref="upload" :class="{'hide_add':imgLength>=limit}"
                :file-list="fileList" list-type="picture-card" 
                :on-change="fileChange"
                :before-upload="beforeUpload"
                :http-request="submitUpload"
                :on-success="success"
                :multiple='multiple'
                :limit="limit">
                <i slot="default" class="el-icon-plus"></i>
                <div style="display:none" slot="file"></div>
            </el-upload>
        </div>
    </div>
</template>
<script>
/**
  * @author DDY
  * @Description 图片上传组件
  * @param {Array} propFile      选  图片list
  * @param {String} url    选接口调用地址 
  * @param {Boolean} multiple   选传，是多图片上传
  * @param {Number} limit  选传，图片上传最大限制
  * @param {Function} success  选传，图片上传成功方法
  * @param {Function} handleRemove  选传，移除方法
*/
import { UploadFile } from "@/utils/require" 
export default {
    name:'uploadImages',
    props:{
        propFile:{
            type: Array,
            default: () => []
        },
        multiple:{
            type: Boolean,
            default: false
        },
        limit:{
            type: Number,
            default: 1
        },
        url:{
            type: String,
            default: ''
        }
    },
    watch:{
        propFile:{
            handler:function(val,old){
                this.$nextTick(()=>{
                    this.imgWrap=val||[];
                    this.fileList=val||[];
                })
            },
            immediate:true,
            deep:true
        }
    },
    data() {
        return {
            imgWrap:[],
            fileList:[]
        }
    },
    computed:{
        imgLength:function(){
            return this.fileList.length||0;
        }
    },
    methods:{
        beforeUpload(file){
            const isJPG = file.type === 'image/jpg'|| file.type === 'image/png'|| file.type === 'application/pdf' || file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isJPG) {
                this.$message.error('上传图片只能是 .png .jpg .pdf格式 !')
                this.handleRemove(file)
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 10MB!')
                this.handleRemove(file)
                return false
            }
        },
        fileChange(file, fileList){//上传文件时限制格式
            
        },
        handleRemove(file) {//删除文件
            //无论是新上传的还是编辑回显的图片,file的uid都是他的唯一标识id,但是传入回显数据时要对数据绑定赋值uid字段,要不然这边file找不到
            this.fileList=this.fileList.filter(item=>item['response']&&item['response']['annex_id']!=file['uid']);
            this.getImg();
        },
        success(response, file, fileList){
            this.fileList=fileList;
            this.getImg();
        },
        submitUpload(file) {//上传到服务器
            let params = new FormData()
            params.append('file',file.file)
            UploadFile (params,{url:this.url}).then(res => {
                this.$message.success('上传成功')
                if(res.errno===0&&!!res.data){
                    this.$emit('success',res.data);
                    file.onSuccess(res.data[0])
                }
            }).catch(err => {
                this.$message.error('上传失败')
                this.handleRemove(file)
            })
        },
        getImg(){
            let arr = JSON.parse(JSON.stringify(this.fileList))
            arr.map((item,i)=>{
                if(item.response){
                   item.uid = item.response.annex_id
                }
            })
            this.$nextTick(()=>{
                this.imgWrap=arr;
            })
            this.$emit('fileChange',arr);
        }
    }
}
</script>
<style scoped lang='scss'>
.img_wrap{
    display: flex;
    .img_w{
        width: 148px;
        height: 148px;
        border-radius: 6px;
        vertical-align: top;
        margin: 0 10px 10px 0;
        img{
            
            border-radius: 6px;
            width: 100%;
            height: 100%;
        }
        .del_img{
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: white;
            font-size: 20px;
            display: none;
            border-radius: 6px;
        }
        &:hover{
            .del_img{
                display: flex;
                background: rgba(0,0,0,.3);
                cursor: pointer;
            }
        }
    }
}
.hide_add{
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
/deep/ .el-upload-list{
    display: none;
}
</style>