2020-12-31 vant Upload 上传文件和图片，

1.效果图

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

<van-field
                            style="padding-bottom: 50px;"
                            class="upload"
                            v-model="form.companyStyleUrl"
                            label="公司风采宣传资料"
                            placeholder="请上传"
                            input-align="right"
                            :rules="[{ required: true, message: '请上传公司风采宣传资料' }]"
                    >
                        <template #input>
                            <van-uploader
                                    v-model="companyStyleUrl"
                                    :after-read="file=>uploadBusinessLicenseUrl(file,'companyStyleUrl')" //如果有多个上传可以传参数来区别，只写一个上传的方法就可以了
                                    multiple
                                    :max-count="1"
                            >
                            </van-uploader>
                        </template>
                    </van-field>

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

<van-field
                            style="padding-bottom: 50px;"
                            class="upload"
                            v-model="form.companyStyleUrl"
                            label="公司风采宣传资料"
                            placeholder="请上传"
                            input-align="right"
                            :rules="[{ required: true, message: '请上传公司风采宣传资料' }]"
                    >
                        <template #input>
                            <van-uploader
                                    v-model="companyStyleUrl"
                                    :after-read="file=>uploadBusinessLicenseUrl(file,'companyStyleUrl')"
                                    multiple
                                    :max-count="1"
                                    upload-icon="plus"
                            >
                            </van-uploader>
                        </template>
                    </van-field>