uni-app实现图片上传功能

效果

代码

<uni-forms-item name="ViolationImg" label="三违照片 :">
			<uni-file-picker ref="image" limit="1" title="" fileMediatype="image"  :listStyles="listStyles" :value="filePathsList" @success="success" :auto-upload="false" @select="handleSelect" @delete="handleDelete" :readonly="isEdit"></uni-file-picker>
			<uni-easyinput v-model="formData.ViolationImg" type="text" :clearable="false" placeholder="" :disabled="isEdit" v-show="false"/>
		</uni-forms-item>

 

			async handleSelect(res) {
				await this.uploadImg(res.tempFiles[0],res.tempFilePaths, 1);
			},
			async uploadImg(tempFiles,tempFilePaths, token) {
				if (!tempFilePaths.length) return;  //如果没有选择图片就退出
				uni.uploadFile({
							url:`${imgUrl}/api/app/file-address/upload-imm-file`,//后台地址
							// #ifdef H5
														file:tempFiles.file,
														// #endif
														// #ifdef APP-PLUS
														filePath:tempFilePaths[0],
														name:'file',
														// #endif
							success: (uploadFileRes) => {
								this.formData.ViolationImg=`/Files/${JSON.parse(uploadFileRes.data).relativeNetPath}`
								this.$refs.form.setValue('ViolationImg',this.formData.ViolationImg)
							}
						});
			},
			handleDelete(err) { // 删除图片
				this.filePathsList.length=0
				this.formData.ViolationImg=''
				this.$refs.form.validateField('ViolationImg').then((res)=>{	
					
				}).catch((err)=>{
					
				})
			},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值