效果
代碼文章來源：http://www.zghlxwxcb.cn/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>?文章來源地址http://www.zghlxwxcb.cn/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實現(xiàn)圖片上傳功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
