2020-12-31 vant Upload 上传文件和图片,更改默认icon, upload-icon="plus"

1.效果图


image.png

结构(绑定的数据和给后台传的数据不一样,绑定的数据必须是数组,可以限制大小1,上传完成,自动隐藏上传按钮)


                        
                    

data里面的数据

data(){
            return {
                form:{
                    businessLicenseUrl:'', //公司营业执照复印件(加盖公章)
                    companySignUrl:'', //企业电子签章
                    companyStyleUrl:'', //公司风采
                    companyStyleFile:'', //公司风采名称
                    personIdUrl:'', //入会申请人身份证复印件
                    photoPath:'', //负责人照片
                    captchaCode: "", //验证码
                    captchaToken: "", //验证码token
                    personDesc:''
                },
              //  绑定在上传结构上的v-model值
                businessLicenseUrl:[], //公司营业执照复印件(加盖公章)
                companySignUrl:[], //企业电子签章
                companyStyleUrl:[], //公司风采
                personIdUrl:[], //入会申请人身份证复印件
                photoPath:[], //负责人照片
                captchaImg:[],
                applyTempUrl: []
            }
        },

方法

  methods:{
            //上传--公司营业执照复印件(加盖公章)
            uploadBusinessLicenseUrl(val,params){
                this.publicUpload(val,params)
            },
            publicUpload(val,params){
                let formData = new FormData()
                //key:file与后台对应
                formData.append('file', val.file)
                this.axios.post(
                    PATH_IMG+'/wcc/file/upload',
                    formData,
                    {
                        headers: {'Content-Type': 'multipart/form-data'}
                    }
                ).then(res => {
                    if (res.data.status==0) {
                        this.form[params]=res.data.fileName;
                        if('companyStyleUrl'===params){
                            this.form.companyStyleFile=res.data.name;
                            this.form[params]=res.data.fileName;
                        }
                    } else {
                        this.$message.error(res.message)
                    }
                }).catch((error) => {
                    console.log(error)
                });
            }
}

3.更改图标, upload-icon="plus",
image.png


                        
                    

你可能感兴趣的:(2020-12-31 vant Upload 上传文件和图片,更改默认icon, upload-icon="plus")