前言：
由于小程序中 wx.uploadFile 的方法是異步上傳，不符合我們的需求，它自身目前暫時不支持同步上傳，所以需要我們手動處理。因為通常我們在上傳圖片時，可能是多張圖片上傳，將圖片上傳后還需要同字段數據再一起保存，所以需要同步來保存處理。通俗易懂來講就是：先圖片上傳返回圖片集合數據，再執行下一步保存，總之圖片上傳的動作和下一步保存的動作不能出現順序錯誤。先圖片再下一步數據一同保存，這理解為同步處理，如果順序不對，則理解為異步。
小程序page端：
<text class="word-class" style="font-size: 28rpx;">添加圖片：</text>
<!--以下為圖片選擇-->
<view class="img_box">
<view class="imgs" wx:for="{{tempFilePaths}}" wx:key="index">
<image src='{{item}}' bindlongpress="DeleteImg" bindtap="PreviewImg" data-index="{{index}}" mode='widthFix' />
</view>
<view class="imgs">
<view class="images" bindtap="ChooseImg">
<!--這里自行創建image文件夾，并添加choose.png，及中部加號-->
<image src='/static/images/add.png' mode='widthFix' />
</view>
</view>
</view>
小程序css端
/* 選擇圖片 */
.img_box{
width:690rpx;
position:relative;
display: flex;
flex-wrap: wrap;
margin:0 auto;
padding-top: 20px;
}
.imgs{
width:33.33333333%;
display: flex;
justify-content: center;
margin-bottom:20rpx;
}
.imgs image{
width:90%;
max-height:212rpx;
border:1px solid rgba(214, 212, 212, 0.1);
}
.imgs .images{
position:relative;
}
.images button{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.img_box .images{
width:90%;
height: 212rpx;
border:1px solid #E8E8E8;
border-radius:4rpx;
display: flex;
align-items: center;
justify-content: center;
}
.img_box .images>image{
width:60rpx;
height:60rpx;
}
小程序JS端：
let App = getApp();
// 工具類
let util = require('../../util/util')
// 接口地址
let api = require('../../config/api.js')
// 當前js的工具類
let custom = require('../../util/custom')
Page({
data: {
tempFilePaths: [],
temp: [], // 多圖片緩存區
},
ChooseImg() {
let that = this;
wx.chooseImage({
count: 9, // 默認最多9張圖片，可自行更改
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: res => {
wx.showToast({
title: '正在添加...',
icon: 'loading',
mask: true,
duration: 1000
})
let fullName = res.tempFilePaths + "";
let last = fullName.lastIndexOf(".");
let suffix = fullName.substring(last + 1, fullName.length);
// 只有圖片才可以上傳
if (suffix == 'jpg' || suffix == 'png' || suffix == 'jpeg' || suffix == 'bmp') {
that.data.temp.push(res.tempFilePaths + "");
} else {
wx.showModal({
title: '提示',
content: '圖片上傳錯誤',
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定')
} else {
console.log('用戶點擊取消')
}
}
});
}
let imgs = that.data.temp;
that.setData({
tempFilePaths: imgs
})
console.log(that.data.tempFilePaths)
}
})
},
//預覽圖片
PreviewImg: function (e) {
let index = e.target.dataset.index;
let that = this;
wx.previewImage({
current: that.data.tempFilePaths[index],
urls: that.data.tempFilePaths,
})
},
//長按刪除圖片
DeleteImg: function (e) {
var that = this;
var tempFilePaths = that.data.tempFilePaths;
let temp = that.data.temp;
var index = e.currentTarget.dataset.index;//獲取當前長按圖片下標
wx.showModal({
title: '提示',
content: '確定要刪除此圖片嗎？',
success: function (res) {
if (res.confirm) {
//console.log('點擊確定了');
tempFilePaths.splice(index, 1);
temp.splice(index, 1);
} else if (res.cancel) {
//console.log('點擊取消了');
return false;
}
that.setData({
tempFilePaths
});
}
})
},
onLoad: function (options) {
},
onReady: function () {
},
cancelWork() {
wx.navigateBack();
},
async saveWrok() {
let that = this;
var tempFilePaths = that.data.tempFilePaths;
// 同步等待
await custom.uploadImage(tempFilePaths).then(res => {
return Promise.resolve(res)
}).then(res => {
// 同步等待返回的圖片地址集合
let files = res;
let param = {
fild1:xxx, // 字段1
filed2:xxx, // 字段2
files: files, // 圖片地址集合
}
// 將圖片地址和字段一起保存
util.http('https://xxx.cn/save', param,'GET').then(function (res) {
if (res.code == 0) {
// 判斷圖片
// console.log("size:" + that.data.files.length)
if (that.data.tempFilePaths.length < 1) {
that.data.temp = [];
that.data.tempFilePaths = [];
wx.showModal({
title: '提示',
content: '圖片上傳錯誤',
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定')
} else {
console.log('用戶點擊取消')
}
}
});
that.setData({
tempFilePaths: [],
temp: [],
});
return false;
}
util.showToast(res.data)
wx.navigateBack();
}
});
});
},
onShow: function () {
// 頁面顯示
},
onHide: function () {
// 頁面隱藏
},
onUnload: function () {
// 頁面關閉
},
})
圖片工具類 custom.js
// 工具類
let util = require('../util/util')
// 地址接口
let api = require('../config/api')
/**
* 真正上傳方法
* @param {圖片上傳接口} imgPath
* @param {圖片文件資源地址} filePath
*/
function uploadList(imgPath, filePath) {
return new Promise((resolve, reject) => {
wx.uploadFile({
url: imgPath,
filePath: filePath + "", //獲取圖片路徑
header: {
'content-type': 'multipart/form-data'
},
name: 'file',
success: function (res) {
if (res.statusCode == 200) {
resolve(res.data)
} else {
reject(err, res);
}
},
fail: function (err) {
reject(err, res);
}
});
});
}
/**
* 圖片上傳，多圖片上傳，同步處理一并返回-虛擬文件地址的list
* @param {本地文件list} tempFilePaths
*/
async function uploadImage(tempFilePaths = []) {
let fileList = new Array();
for (let i = 0; i < tempFilePaths.length; i++) {
let data = await uploadList(api.workUpload, tempFilePaths[i]);
// 進行設置返回
let rt = JSON.parse(data);
// 由于之前封裝的request方法為application/json類型，所以這里需要特殊處理返回的數據格式
let url = (rt.url).replaceAll('"','');
fileList.push(url);
}
return fileList;
}
module.exports = {
orderWork, // list
uploadImage, // 多張圖片上傳
}
