vue上传文件封装

<template>
    <div>
        <el-upload action="fakeaction" ref="upload"
            :disabled="disabled"
            :file-list="fileList"
            :on-change="fileChange"
            :before-upload="beforeUpload"
            :http-request="submitUpload"
            :on-success="success"
            :drag="drag"
            :multiple='multiple'
            :limit="limit">
           <div class="my_temp" v-if="drag">
                <slot>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">{{title_name}}</div>
                </slot>
            </div>
            <el-button v-else slot="trigger" size="small" type="primary" :disabled="disabled">{{title_name}}</el-button>
            <div style="display:none" slot="file"></div>
        </el-upload>
        <div class="file_wrap">
            <div class="file_item" v-for="file of fileWrap" :key="file.uid">
                <i class="el-icon-document"></i>
                <span>{{file.name}}</span>
                <i class="el-icon-close" @click="handleRemove(file)"></i>
            </div>
        </div>
    </div>
</template>
<script>
/**
  * date 2021/8/18
  * author @ddy
  * @Description 文件上传组件
  * @param {Array} propFile      选  文件list [{name:'',uid:'123'}]
  * @param {Array} fileType      选  文件类型 ['']
  * @param {String} url          选  接口调用地址 
  * @param {String} title_name    按钮名称
  * @param {Boolean} multiple    选  是多文件上传
  * @param {Boolean} drag        选  是否支持拖拽上传
  * @param {Boolean} disabled    选  禁用上传
  * @param {Number} limit        选  文件上传数量最大限制
  * @param {Number} size         选  文件上传大小最大限制
  * @param {Function} success    选  上传成功方法
  * @param {Function} fileChange 选  文件上传成功或者移除后的方法  可以理解为覆盖默认文件改变的方法
  * @use <upload-file :propFile="[{name:'',uid:'123'}]" url="api/dd" :limit="1" :disabled="fileDisabled" @fileChange="submitUpload" @success="success"/>
  */
import { UploadFile } from "@/utils/require" 
export default {
    name:'UploadFile',
    props:{
        propFile:{
            type: Array,
            default: () => []
        },
        multiple:{
            type: Boolean,
            default: false
        },
        drag:{
            type: Boolean,
            default: false
        },
        limit:{
            type: Number,
            default: 1
        },
        disabled:{
            type: Boolean,
            default: false
        },
        url:{
            type: String,
            default: ''
        },
        title_name:{
            type: String,
            default: '选择附件'
        },
        fileType:{
            type: Array,
            default:()=>['pdf','doc','docx']
        },
        size:{
           type: Number,
            default: 20
        }
    },
    watch:{
        propFile:{
            handler:function(val,old){
                this.$nextTick(()=>{
                    this.fileWrap=val||[];
                    this.fileList=val||[];
                })
            },
            immediate:true,
            deep:true
        }
    },
    data() {
        return {
            fileWrap:[],
            fileList:[]
        }
    },
    methods:{
        beforeUpload(file){
            let name=file.name.substring(file.name.lastIndexOf('.')+1);
            const isJPG =!this.fileType.length||this.fileType.indexOf(name)>-1;
            const isLt2M = file.size / 1024 / 1024 < this.size;
            if (!isJPG) {
                let str=this.fileType.map(item=> '.'+item).join(" ")
                this.$message.error('上传文件只能是 '+str+'格式 !')
                this.handleRemove(file)
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传文件大小不能超过 '+this.size+'MB!')
                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 => {
                if(res.errno===0&&!!res.data){
                    this.$message.success('上传成功')
                    this.$emit('success',res.data);
                    file.onSuccess(res.data[0])
                }else{
                    this.$message.error(res.errmsg)
                }
            }).catch(err => {
                this.$message.error(err.errmsg)
                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.fileWrap=arr;
            })
            this.$emit('fileChange',arr);
        }
    }
}
</script>
<style scoped lang='scss'>
/deep/ .el-upload-dragger{
    border: 2px dashed #d9d9d9;
    position: relative;
    .my_temp{
        position: absolute;
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        .el-icon-upload{
            margin-top: 0px;
        }
    }
}
.file_wrap{
    .file_item{
        display: flex;
        align-items: center;
        background: #F4F6FB;
        padding:0 5px;
        margin: 5px 0;
        >span{
            flex: 1;
            color: #636B78;
            margin: 0 10px;
        }
        i{
            color: #C4C4C4;
            font-size: 20px;
            &:nth-of-type(2){
                cursor: pointer;
            }
        }
    }
}
.hide_add{
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
/deep/ .el-upload-list{
    display: none;
}
</style>