這是第三個(gè)版本了。
通過promise異步實(shí)現(xiàn)發(fā)布多個(gè)圖片，具體要發(fā)布圖片，前端和js都需要改數(shù)量限制，最大值為9。
發(fā)現(xiàn)之前的方法已經(jīng)過時(shí)，能用就行我也懶得換了，關(guān)于圖片上傳過大，影響上傳速度以及主頁展示渲染速度，影響體驗(yàn)，所以我加了一個(gè)壓縮的方法。
小程序選擇圖片的一次或者多次選擇，但是上傳只能一張一張上傳，使用使用promise和for循環(huán)實(shí)現(xiàn)，一張一張上傳，上傳一張后，返回圖片在云存儲(chǔ)的地址，然后把他保存到一個(gè)數(shù)組，一直拼接，直到for循環(huán)結(jié)束，為了方便云存儲(chǔ)管理，我把路徑做了動(dòng)態(tài)管理，以年月日為路徑。文章來源：http://www.zghlxwxcb.cn/news/detail-567212.html
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
imgList: [],
fileIDs: [],
title: '',
content: '',
chongfu:true,//設(shè)置的timeout定時(shí)器防止短時(shí)間重復(fù)點(diǎn)擊
imgt:[],//圖片壓縮路徑
address:{}//使用request獲取的地理位置信息
},
onLoad(options) {
},
title_input(e) {
var title = e.detail.value
console.log(title)
this.setData({
title: title
})
},
content_input(e) {
var content = e.detail.value
console.log(content)
this.setData({
content: content
})
},
//選擇圖片
ChooseImage() {
var that = this
var promise1 = new Promise((resolve, reject) => {
wx.chooseImage({
count: 9 - this.data.imgList.length, //默認(rèn)9,我們這里最多選擇6張
sizeType: ['compressed'], //可以指定是原圖還是壓縮圖，這里用壓縮
sourceType: ['album', 'camera'], //從相冊(cè)選擇
success: (res) => {
if (that.data.imgList.length != 0) {
that.setData({
imgList: that.data.imgList.concat(res.tempFilePaths)
})
} else {
that.setData({
imgList: res.tempFilePaths
})
}
console.log("路徑", that.data.imgList)
console.log("選擇圖片成功", res)
resolve()
}
});
})
Promise.all([promise1, ]).then(res => {
for (var i = 0; i < that.data.imgList.length; i++) {
wx.compressImage({ //圖片壓縮
src: that.data.imgList[i], // 圖片路徑
quality: 50 // 壓縮質(zhì)量
}).then(res => {
console.log("壓縮成功", res)
that.setData({
imgt: that.data.imgt.concat(res.tempFilePath)
})
if (that.data.imgList.length - 1 == i)
that.setData({
imgList: that.data.imgt
})
})
}
})
},
//刪除圖片
DeleteImg(e) {
wx.showModal({
title: '要?jiǎng)h除這張照片嗎？',
content: '',
cancelText: '取消',
confirmText: '確定',
success: res => {
if (res.confirm) {
this.data.imgList.splice(e.currentTarget.dataset.index, 1);
this.setData({
imgList: this.data.imgList
})
}
}
})
},
//上傳數(shù)據(jù)
fabu(e) {
var that = this
that.setData({
chongfu: false
})
setTimeout(function () {
that.setData({
chongfu: true
})
}, 2000);
let account = wx.getStorageSync('account')
//console.log(account)
if (!account || !account.name) {
wx.showToast({
icon: 'error',
title: '請(qǐng)先登陸',
})
setTimeout(() => {
wx.navigateTo({
url: '/pages/demo04/demo04',
})
}, 1000);
return
}
if (!that.data.content || that.data.content.length < 6) {
wx.showToast({
icon: "error",
title: '內(nèi)容必須大于6個(gè)字'
})
return
}
wx.showLoading({
title: '發(fā)布中...',
})
wx.request({
url: 'https://ip.useragentinfo.com/json',
success: function (res) {
///console.log(res.data)
that.setData({
address:res.data
})
}
})
var date = new Date();
var Y = date.getFullYear();
var M = date.getMonth() + 1;
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var H = date.getHours()
var min = date.getMinutes()
var second=date.getSeconds()
if (min < 10) {
min = '0' + min
}
if (M < 10) {
M = '0' + M
}
var tiezi_fabu_time ={}
tiezi_fabu_time.Y=Y
tiezi_fabu_time.M=M
tiezi_fabu_time.D=D
tiezi_fabu_time.H=H
tiezi_fabu_time.min=min
var langtime=Date.parse(new Date())
// let tiezi_fabu_time = Y + "-" + M + "-" + D + " " + H + ":" + min
const promiseArr = []
//只能一張張上傳 遍歷臨時(shí)的圖片數(shù)組
for (let i = 0; i < that.data.imgList.length; i++) {
let filePath = that.data.imgList[i]
let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正則表達(dá)式，獲取文件擴(kuò)展名
//在每次上傳的時(shí)候，就往promiseArr里存一個(gè)promise，只有當(dāng)所有的都返回結(jié)果時(shí)，才可以繼續(xù)往下執(zhí)行
promiseArr.push(new Promise((reslove, reject) => {
wx.cloud.uploadFile({
cloudPath: '圖片/帖子/帖子上傳圖片/' + Y + '/' + M + '/' + D + '/' + new Date().getTime() + suffix,
filePath: filePath, // 文件路徑
}).then(res => {
// get resource ID
console.log("上傳結(jié)果", res.fileID)
that.setData({
fileIDs: that.data.fileIDs.concat(res.fileID)
})
reslove()
}).catch(error => {
console.log("上傳失敗", error)
})
}))
}
//保證所有圖片都上傳成功
let db = wx.cloud.database()
Promise.all(promiseArr).then(res => {
db.collection('tiezi').add({
data: {
title: that.data.title,
content: that.data.content,
tiezi_fabu_time: tiezi_fabu_time,
touxiangurl: wx.getStorageSync('account').touxiangurl,
imageurl: that.data.fileIDs,
account_id: wx.getStorageSync('account')._id,
name: wx.getStorageSync('account').name,
address:that.data.address,
school: that.data.school,
langtime:langtime,
dianzan:0,
shoucang:0,
comments: [],
},
success: res => {
wx.hideLoading()
wx.showToast({
title: '發(fā)布成功',
})
//清空數(shù)據(jù)
this.setData({
imgList: [],
fileIDs: [],
})
console.log('發(fā)布成功', res)
wx.navigateBack({
delta: 1,
})
},
fail: err => {
wx.hideLoading()
wx.showToast({
icon: 'error',
title: '網(wǎng)絡(luò)不給力....'
})
console.error('發(fā)布失敗', err)
}
})
})
},
})
<view style="margin: 25rpx;display: flex;flex-direction: column;background-color: #ffffff;padding: 20rpx;border-radius: 35rpx;">
<view style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;align-items: center;">
<input bindinput="title_input" placeholder="標(biāo)題可有可無" style="width: 90%;padding-bottom: 15rpx;" maxlength="15" />
</view>
<textarea bindinput="content_input" placeholder="重要的是分享你的想法..." type="text" maxlength="500" style="word-break: break-all;white-space: pre-wrap;;width: 100%;padding-top: 15rpx;border-top: 1px solid #f5f5f5;"></textarea>
</view>
<view style="background-color: #ffffff;padding: 30rpx;margin: 25rpx;border-radius: 40rpx;">
<view class="imageRootAll">
<block wx:for="{{imgList}}" wx:key="index">
<view class="imgItem">
<image class="img" src='{{item}}' mode='aspectFill'></image>
<image class="closeImg" bindtap="DeleteImg" src="/images/close.png" data-index="{{index}}" />
</view>
</block>
<!-- 選擇圖片按鈕 -->
<view wx:if="{{imgList.length<6}}" class="imgItem" bindtap="ChooseImage">
<image class="photo" src="../../images/photo.png"></image>
</view>
</view>
</view>
<view style="justify-content: center;display: flex;">
<view bindtap="{{chongfu==true?'fabu':''}}" style="word-break: keep-all;color: #ffffff;background-color: #0052FA;padding: 12rpx 20rpx 12rpx 20rpx;border-radius: 40rpx;font-size: 35rpx;width: 140rpx;text-align: center;">publish</view>
</view>
page {
background-color: #F3F4F9;
}
.fabu {
display: flex;
float: right;
margin-right: 10rpx;
color: #A9A9A9;
font-size: 40rpx;
}
.title_input {
width: 100%;
border-bottom: 1px solid #DCDCDC;
margin: 30rpx;
}
.content_input {
margin: 30rpx;
}
.img_box {
display: flex;
flex-wrap: wrap;
margin: 0rpx;
}
.img_item_i {
display: block;
width: 100%;
height: 100%;
}
.img_item {
width: 210rpx;
height: 210rpx;
position: relative;
margin-right: 2%;
margin-bottom: 2%;
border: 1px solid #c0ccda;
}
.closeImv {
position: absolute;
right: 0rpx;
top: 0rpx;
width: 35rpx;
height: 35rpx;
color: #fff;
background-color: red;
border-radius: 50%;
text-align: center;
line-height: 30rpx;
font-weight: 600;
}
.imageRootAll {
margin: 6rpx;
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.imgItem {
margin: 6rpx;
position: relative;
width: 200rpx;
height: 200rpx;
background: gainsboro;
margin-top: 50rpx;
}
.img {
width: 100%;
height: 100%;
}
.closeImg {
position: absolute;
right: 0px;
width: 40rpx;
height: 40rpx;
}
.photo {
width: 50%;
height: 50%;
margin: 25%;
}
就到這里。文章來源地址http://www.zghlxwxcb.cn/news/detail-567212.html
到了這里，關(guān)于微信小程序發(fā)布圖文代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
