前言：
由于小程序中 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, // 多张图片上传
}
