由于項(xiàng)目需要使用asp，因此用asp寫了一個(gè)接收微信小程序上傳多張照片的功能，例用的是wx.chooseMedia和wx.uploadFile配合，循環(huán)上傳多張照片，微信小程序現(xiàn)在好像最多可以上傳20張，閑話不好上代碼，需要的可以直接下載，前后臺(tái)都有，本文只放前端代碼：
本文實(shí)現(xiàn)微信小程序前端上傳多張照片，實(shí)現(xiàn)上傳后展示出來(lái)，并可以刪除任意照片，點(diǎn)擊照片可以預(yù)覽，上下滑動(dòng)，服務(wù)器端用asp接收?qǐng)D片：
以下是js部份：
data: {
? ? ImgSrc:[]//存服從服務(wù)器返回的圖片地址，如果需要保存數(shù)據(jù)庫(kù)，把這個(gè)以post形式提交走
? },
? updateHead(e){
? ? ? wx.chooseMedia({
? ? ? count: 9,
? ? ? mediaType: ['image'],
? ? ? sourceType: ['album', 'camera'],
? ? ? sizeType:['compressed'],
? ? ? camera: 'back',
? ? ? success: (res) => {
? ? ? ? for(i=0;i<res.length;i++){
? ? ? ? ? wx.uploadFile({
? ? ? ? ? ? url: app.globalData.webapi + `upload.asp?&v=${Math.random()}`,
? ? ? ? ? ? filePath: res.tempFiles[i].tempFilePath,
? ? ? ? ? ? name: 'file',
? ? ? ? ? ? formData: {
? ? ? ? ? ? ? 'mobile': '18611436777',
? ? ? ? ? ? ? 'weixin' : '18611436777'
? ? ? ? ? ? },
? ? ? ? ? ? success: (res) => {
? ? ? ? ? ? ? if(res.Code == 200){
? ? ? ? ? ? ? ? if(obj.ok == 0){
? ? ? ? ? ? ? ? ? this.data.ImgSrc(obj.ImgSrc);
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? app.showToast(obj.msg,'error',3000)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? app.showToast('upload地址出錯(cuò)','error',3000)
? ? ? ? ? })
? ? ? ? }
? ? ? }
? ? })
? },
以下是wxml部份
<view bindtap="updateHead">上傳照片</view>
<view class="ImgSrc">
? <view class="pic" wx:for="{{ImgSrc}}" wx:key="index">
? ? <image src="{{item}}" data-src="{{item}}" bindtap="previewimage" mode="widthFix"></image>
? ? <view class="del" data-index="{{index}}" bindtap="del"></view>
? </view>
</view>文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-500335.html
完整包下載地址：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-500335.html
到了這里，關(guān)于asp微信小程序上傳多張照片功能,wx.chooseMedia和wx.uploadFile配合實(shí)現(xiàn)多張圖片上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
