本篇內容介紹了“微信小程序如何實現上傳圖片小功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

用到的api
wx.chooseMedia(); 用于拍攝或從手機相冊中選擇圖片或視頻

功能：點擊上傳圖片，可多選，或者拍照上傳；點擊圖片放大查看；長按圖片刪除

效果圖

json里面引用weui的組件uploader

{
"navigationBarTitleText":"評價工單",
"usingComponents":{
"mp-uploader":"weui-miniprogram/uploader/uploader",
"mp-cells":"weui-miniprogram/cells/cells",
"mp-cell":"weui-miniprogram/cell/cell"
}
}

wxml

<viewclass="weui-uploader">
<viewclass="img-vweui-uploader__bd">
<viewclass='pic'wx:for="{{technicianAssessPicture}}"wx:for-item="item"wx:key="*this">
<imageclass='weui-uploader__img'src="{{item}}"data-index="{{index}}"mode="aspectFill"bindlongpress="deleteTechnician"bindtap="previewTechnician">
</image>
</view>
<viewclass="weui-uploader__input-boxpic"bindtap="technicianImg"></view>
</view>
</view>

js

data:(){
technicianAssessPicture:[],//技師圖片
}
//上傳技師圖片
technicianImg:function(e){
varthat=this;
vartechnicianAssessPicture=this.data.technicianAssessPicture;
if(technicianAssessPicture.length>=9){
this.setData({
lenMore:1
});
setTimeout(function(){
that.setData({
lenMore:0
});
},2500);
returnfalse;
}
wx.chooseMedia({
count:9,//默認9
mediaType:['image','video'],//文件類型
//image只能拍攝圖片或從相冊選擇圖片
//video只能拍攝視頻或從相冊選擇視頻

//sizeType:['original','compressed'],//所選的圖片的尺寸original原圖，compressed壓縮圖
//僅對mediaType為image時有效，是否壓縮所選文件

sourceType:['album','camera'],//圖片和視頻選擇的來源
maxDuration:30,//拍攝視頻最長拍攝時間，單位秒。時間范圍為3s至60s之間。不限制相冊。
camera:'back',//僅在sourceType為camera時生效，使用前置或后置攝像頭
//back使用后置攝像頭;front使用前置攝像頭
success:function(res){
vartempFilePaths=res.tempFiles;
vartechnicianAssessPicture=that.data.technicianAssessPicture;
for(vari=0;i<tempFilePaths.length;i++){
if(technicianAssessPicture.length>=9){
that.setData({
technicianAssessPicture:technicianAssessPicture
});
returnfalse;
}else{
consttempFilePaths1=tempFilePaths.map(v=>v.tempFilePath)
//tempFilePaths數據是json數組，我們需要的是普通數組需要處理一下
technicianAssessPicture.push(tempFilePaths1[i]);
}
}
that.setData({
technicianAssessPicture:technicianAssessPicture
});
console.log(that.data.technicianAssessPicture,'hhhhhhhhhhhhhhhhhhhhh');
}
});
},

處理后打印出來的數據

預覽，刪除

//預覽圖片
previewTechnician:function(e){
//獲取當前圖片的下標
varindex=e.currentTarget.dataset.index;
//所有圖片
vartechnicianAssessPicture=this.data.technicianAssessPicture;
wx.previewImage({
//當前顯示圖片
current:technicianAssessPicture[index],
//所有圖片
urls:technicianAssessPicture
})
},

//長按刪除
deleteTechnician:function(e){
varthat=this;
vartechnicianAssessPicture=that.data.technicianAssessPicture;
varindex=e.currentTarget.dataset.index;//獲取當前長按圖片下標
wx.showModal({
//cancelColor:'cancelColor',
title:'提示',
content:'確定要刪除此圖片嗎？',
success:function(res){
if(res.confirm){
console.log('確定');
technicianAssessPicture.splice(index,1);
}elseif(res.cancel){
console.log('取消');
returnfalse;
}
that.setData({
technicianAssessPicture
})
}
})
},

總結

以上是生活随笔為你收集整理的微信小程序如何实现上传图片小功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。