效果
代码文章来源：https://www.toymoban.com/news/detail-644193.html
<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>文章来源地址https://www.toymoban.com/news/detail-644193.html
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)=>{
})
},到了这里，关于uni-app实现图片上传功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
