1.效果图
image.png
结构（绑定的数据和给后台传的数据不一样，绑定的数据必须是数组，可以限制大小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
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>
