vue 封装饿了么文件上传组件实现图片上传

elUpload里的很多回调方法,对于同一个项目来说,很多都是共用的和重复的.所以针对自家项目稍微做了封装,

简单实现了:1.图片大小,数量限制和提示,2.超出数量隐藏上传按钮的功能.3.校验必填

不足:图片是立刻上传而不是确认后上传 ,比较占用资源,后续希望优化这部分.

代码:

其中,import 的是项目获取本地token;config里获取项目路径.如果是小白,可直接把这两个属性也绑定到props上,通过父传子的方法使用.

使用方法:

在父组件:

1.引入:import PictureUpload from 'components/PictureUpload'
2.组件:
                   
        
3.change方法:
        change(childValue){
              this.form.pics = childValue           // 回传给form表单的值
              // this.$refs.form.validateField('pics') // 这里可以触发自己定义的必填校验
        },
4.data(){
    return{
        limitNum:3,
        initPics:"",
        uploadApi: "http://xxxxx",
        typeData: {type: 'topic'}, 
    }
}
5.校验 rules: { pics: [ { required: true, validator: this.picCheck , trigger: 'blur'}]}
6.picCheck方法:
            picCheck(rule,value,callback){ //方法内规则可以自定义
                if(this.form.pics.trim().length>0){ //至少上传一张校验
                    callback()                    
                }else{
                    callback(new Error('请上传至少一张图片!'));
                }
            }