关于uni-app中使用vant组件文件上传功能改造，套用uni-app文件上传组件

最新推荐文章于 2024-07-25 14:51:34 发布

键盘飞行员

最新推荐文章于 2024-07-25 14:51:34 发布

阅读量375

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_68397463/article/details/134711398

版权

1.vant2组件文件上传有问题，更换了uni-file-picker组件

<van-form @submit="onSubmit">
			<van-field v-model="form.licensePlate" name="车牌号码" label="车牌号码" placeholder="用户名"
				:rules="[{ required: true, message: '请输入' }]" />
			<van-field v-model="form.vehicleColor" name="车辆颜色" label="车辆颜色" placeholder="用户名"
				:rules="[{ required: true, message: '请输入' }]" />
			<van-field readonly clickable name="personnelTypeVal" :value="carTypeValue" required label="车辆类型"
				placeholder="请选择" @click="vehicleType = true" />
			<van-popup v-model="vehicleType" position="bottom">
				<van-picker show-toolbar :columns="carType" @confirm="PersonnelType" @cancel="showPicker = false" />
			</van-popup>
			<van-field v-model="form.affiliatedEnterprise" name="所属企业" label="所属企业" placeholder="用户名"
				:rules="[{ required: true, message: '请输入' }]" />
			<van-field name="uploader" label="驾驶证">
				<template #input>
					<uni-file-picker limit="9" title="" @select="select" v-model="fileLists"></uni-file-picker>
				</template>
			</van-field>
			<van-field readonly clickable name="datetimePicker" :value="form.validityPeriodBegins" label="有效期起"
				placeholder="请选择" @click="validityStartWindow = true" />
			<van-popup v-model="validityStartWindow" position="bottom">
				<van-datetime-picker type="date" title="选择年月日" @confirm="ValidityPeriodBegins"
					@cancel="validityStartWindow = false" />
			</van-popup>
			<van-field readonly clickable name="datetimePicker" :value="form.endOfValidityPeriod" label="有效期止"
				placeholder="请选择" @click="expirationWindow = true" />
			<van-popup v-model="expirationWindow" position="bottom">
				<van-datetime-picker type="date" title="选择年月日" @confirm="EndOfValidityPeriod"
					@cancel="expirationWindow = false" />
			</van-popup>
			<van-field name="radio" label="是否有效">
				<template #input>
					<van-radio-group v-model="form.validOrNot" direction="horizontal">
						<van-radio :name="convertToNumber(1)">是</van-radio>
						<van-radio :name="convertToNumber(2)">否</van-radio>
					</van-radio-group>
				</template>
			</van-field>
		</van-form>

2.在uni-app中下载就可以使用

官网：uni-app官网 (dcloud.net.cn)

扩展组件（uni-ui）->组件名：uni-file-picker

3.定义fileLists数组，存放临时文件回显

fileLists: [], //文件上传

4.文件上传使用@select="select"，上！1传的方法

// 文件上传
			select(file) {
				let token = uni.getStorageSync('token');
				const tempFilePaths = file.tempFilePaths[0];
				uni.uploadFile({
					url: publicAddress + '/auth/upload', //仅为示例，非真实的接口地址
					filePath: tempFilePaths,
					name: 'file',
					header: {
						Authorization: token,
						ContentType: "application/x-www-form-urlencoded",
					},
					formData: {

					},
					success: (res) => {
						let data = JSON.parse(res.data);
						const imgurl = resourceFilePath + data.data.url
						this.form.driverLicensePhoto.push(imgurl)
					}
				});

			},

uni.uploadFile是官方提供的上传方法！！！