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 H5file:tempFiles.file,// #endif// #ifdef APP-PLUSfilePath:tempFilePaths[0],name:'file',// #endifsuccess: (uploadFileRes) => {this.formData.ViolationImg=`/Files/${JSON.parse(uploadFileRes.data).relativeNetPath}`this.$refs.form.setValue('ViolationImg',this.formData.ViolationImg)}});},handleDelete(err) { // 删除图片this.filePathsList.length=0this.formData.ViolationImg=''this.$refs.form.validateField('ViolationImg').then((res)=>{	}).catch((err)=>{})},