//wxml?<button class='button' bingtap="uploadSomeMsg">上傳</button> ? ?
? ? ? ? ? <view class="uploadImgBox">
? ? ? ? ? ? <view class='smallImgBox'>
? ? ? ? ? ? ? <block wx:for="{{img_arr}}" wx:key="index">
? ? ? ? ? ? ? ? <view class='logoinfo'>
? ? ? ? ? ? ? ? ? <image class='logoinfo' mode="aspectFill" src='{{item}}' data-index="{{index}}" bindtap="previewImg"
? ? ? ? ? ? ? ? ? ? bindlongpress="deleteImg" name="headimage" ></image>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? </block>
? ? ? ? ? ? ? <image bindtap='getLocalityImg' class='moreImg' src="../../images/uploadPictures.png">
? ? ? ? ? ? ? </image>
? ? ? ? ? ? </view>
? ? ? ? ? ? <view>
? ? ? ? ? </view>?
</view>

//wxss
.uploadImgBox {
? margin: 30rpx 0;
}

.logoinfo {
? height: 180rpx;
? width: 180rpx;
? margin: 10rpx ;
}

.smallImgBox {
? display: grid;
? grid-template-columns: repeat(3,1fr);
? grid-template-rows: repeat(2,180rpx);
? grid-gap:20rpx 10rpx;
}

.moreImg {
? border-radius: 10rpx;
? height: 180rpx;
? width: 180rpx;
? margin: 20rpx ;
}.button{ ?
?height: 90rpx; ?
?width: 270rpx; ?
?font-size: 38rpx; ?
?background-color: rgba(146, 163, 45, 0.288); ?
?font-weight: 600; ?
?color: white;
?}?
?button::after {
? border: none;
}?

//js
Page({
? data: {
? ? img_arr: [], //儲(chǔ)存照片的數(shù)組
? },

//https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html ?微信小程序上傳文件api
? //上傳圖片到服務(wù)器?
? uploadSomeMsg() {
? ? var that = this
? ? var adds = that.data.img_arr;
? ? for (let i = 0; i < this.data.img_arr.length; i += 1) {
? ? ? wx.uploadFile({
? ? ? ? url:'https://example.weixin.qq.com/upload', //僅為示例，非真實(shí)的接口地址
? ? ? ? filePath: that.data.img_arr[i],
? ? ? ? name: 'content',
? ? ? ? formData: {
? ? ? ? ? 'user': adds
? ? ? ? },
? ? ? ? success: function (res) {
? ? ? ? ? console.log(res, "上傳圖片啦")
? ? ? ? ? if (res) {
? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? title: '已提交發(fā)布！',
? ? ? ? ? ? ? duration: 3000
? ? ? ? ? ? });
? ? ? ? ? }
? ? ? ? }
? ? ? })
? ? }
? },

? //從本地獲取照片?
? getLocalityImg() {
? ? let that = this;
? ? if (this.data.img_arr.length < 5) {
? ? ? wx.chooseImage({
? ? ? ? count: 5 - that.data.img_arr.length, //上傳圖片的數(shù)量 當(dāng)之前上傳了部分圖片時(shí) ,總數(shù) - 已上傳數(shù) = 剩余數(shù) ? (限制上傳的數(shù)量)
? ? ? ? sizeType: ['original', 'compressed'], ?//可以指定原圖或壓縮圖,默認(rèn)二者都有
? ? ? ? sourceType: ['album', 'camera'], ? ? ? ?//指定圖片來(lái)源是相機(jī)還是相冊(cè),默認(rèn)二者都有
? ? ?success(res) {
? ? ? ? ? console.log(res, "---------上傳的圖片")

? ? ? ? ? const tempFiles = res.tempFiles //包含圖片大小的數(shù)組

? ? ? ? ? let answer = tempFiles.every(item => { ? //限制上傳圖片大小為2M,所有圖片少于2M才能上傳
? ? ? ? ? ? return item.size <= 2000000
? ? ? ? ? })
? ??
? ? ? ? ? if (answer) {
? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? img_arr: that.data.img_arr.concat(res.tempFilePaths),
? ? ? ? ? ? })
? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? title:'上傳圖片不能大于2M!',
? ? ? ? ? ? ? ? icon:'none' ? ?
? ? ? ? ? ? })
? ? ? ? ? }

? ? ? ? }
? ? ? })

? ? } else {
? ? ? wx.showToast({ ?//超過(guò)圖片張數(shù)限制提示
? ? ? ? title: '最多上傳五張圖片',
? ? ? ? icon: 'none',
? ? ? ? duration: 2000
? ? ? })

? ? }
? },

? //刪除照片功能與預(yù)覽照片功能?
? deleteImg(e) {
? ? let that = this;
? ? let img_arr = that.data.img_arr;
? ? let index = e.currentTarget.dataset.index; ?//獲取長(zhǎng)按刪除圖片的index
? ? wx.showModal({
? ? ? title: '提示',
? ? ? content: '確定要?jiǎng)h除此圖片嗎？',
? ? ? success(res) {
? ? ? ? if (res.confirm) {
? ? ? ? ? // console.log('點(diǎn)擊確定了');
? ? ? ? ? img_arr.splice(index, 1);
? ? ? ? } else if (res.cancel) {
? ? ? ? ? // console.log('點(diǎn)擊取消了');
? ? ? ? ? return false;
? ? ? ? }
? ? ? ? that.setData({
? ? ? ? ? img_arr: img_arr
? ? ? ? });
? ? ? }
? ? })
? },

? //預(yù)覽圖片
? previewImg(e) {
? ? let index = e.currentTarget.dataset.index;
? ? let img_arr = this.data.img_arr;
? ? wx.previewImage({
? ? ? current: img_arr[index],
? ? ? urls: img_arr
? ? })
? },


})

//1__轉(zhuǎn)換本地上傳圖片

//如果需要上傳base64格式圖片到后端,可以在上傳圖片時(shí)可以這樣轉(zhuǎn)換,其它的和普通接口上傳數(shù)據(jù)一樣
? ? ? ? ? //轉(zhuǎn)換結(jié)果
? ? ? ? let data=wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")?
//`data:image/png;base64,${data}`
//上傳時(shí)只需要在轉(zhuǎn)換結(jié)果前加一個(gè): `data:image/png;base64,${data}` ? ,就是完整的圖片數(shù)據(jù)啦

? //2__轉(zhuǎn)換服務(wù)器網(wǎng)絡(luò)圖片為base64
? ? images.forEach(url => {
? ? ? ? ? let newUrl = `https://dx.showweb.net/upload${url}` //需拼上前綴才能下載網(wǎng)絡(luò)圖片

? ? ? ? this.imageToBase(newUrl).then((res)=>{
? ? ? ? ? this.data.img_arr.push(res)
? ? ? ? ? this.setData({
? ? ? ? ? ? img_arr:this.data.img_arr
? ? ? ? ? })
? ? ? ? ? })

? ? ? ? })


? imageToBase(img) {
? ?return new Promise((resolve, reject)=>{
? ? ? wx.downloadFile({ //先下載圖片
? ? ? ? url: img,
? ? ? ? success(res) {
? ? ? ? ? if (res.statusCode === 200) {
? ? ? ? ? ? wx.playVoice({
? ? ? ? ? ? ? filePath: res.tempFilePath //選擇圖片返回的相對(duì)路徑
? ? ? ? ? ? })
? ? ? ? ? ? resolve(res.tempFilePath)
? ? ? ? ? }
? ? ? ? }
? ? ? })
? ? })
? },