uni-app实现图片上传功能

最新推荐文章于 2024-09-12 15:56:50 发布

iiiilooaixuud

最新推荐文章于 2024-09-12 15:56:50 发布

阅读量703

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_46617584/article/details/132236477

版权

效果

代码

<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)=>{
					
				})
			},