简介：本章主要记录微信小程序图片上传功能的实现过程，以及开发过程中遇到的问题（菜鸟日记），主要分为:4个part
p1：wx.chooseImage 从本地相册选择图片或使用相机拍照
p2：wx.uploadFile 将本地资源上传到服务器
p3：提交图片链接（有时候包含其他页面参数）
p4：附加图片预览和长按删除
步骤一：wx.chooseImage
图片上传第一步首先是选择图片，微信小程序为我们提供了wx.chooseImage方法，活不多说先上文档示例（点我查看官方文档）：
文档里有所有参数的对应解释，在这里我只介绍常用的几个，大家对照图片来看比较清晰明了
1. count：每次最多可以选择的图片张数，默认为9张
2. sizeType：所选的图片的尺寸—>original（原图）—>compressed（压缩图）
3. sourceType：图片来源—>album（从相册选图）—>camera（使用相机拍照）
4. res.tempFilePaths：文件本地路径
5. res.tempFiles：图片的本地临时文件列表，包含图片路径path和图片大小size，单位为B
在success回调里就可以执行我们的下一步啦！
步骤二：wx.uploadFile
这一步主要是在拿到图片的本地临时路径后传给后台，获取到新的图片地址（点我查看官方文档）
还是先来看几个参数说明：
1. url：服务器地址，就是传图片的接口
2. filePath：要上传文件资源的路径 (本地路径)，不明白的童鞋往上翻，看tempFilePaths，tempFiles
3. name：文件对应的 key，也就是后台接收图片路径的字段名
4. formData：HTTP 请求中其他额外的form data
在实际项目中我们会涉及到多张图片上传，网上已经有大神用递归的方法对上传做了封装，我就不献丑了，直接把链接粘在这里：小程序wx.uploadFile上传问题
在使用这个方法的过程中我遇到了一个问题，就是当我上传多张的时候总是只显示一张图片，这是怎么回事呢？在我一番查找后发现原来是因为每次执行上传方法都会创建新的Promise对象，导致我们的数据不能连接起来，原文我找不到了，给大家贴个我的代码好了
uploadModal(filePaths, successUp, failUp, i, length) {
let that = this;
let upload = new Promise(function (resolve, reject) {
function timeout(filePaths, successUp, failUp, i, length) {
wx.uploadFile({url: xxxx,//(填自己的接口地址就可以)
filePath: filePaths[i],
name: 'multipartFile',
formData: {},
success: (res) => {
successUp++;
var data = JSON.parse(res.data);
},
fail: (res) => {
failUp++;
},
complete: () => {
i++;
if (i == length) {
wx.showToast({
title: successUp + '张上传成功,' + failUp + '张上传失败！',
icon: 'none',
duration: 2000,
mask: true
})
resolve();
} else { //递归调用uploadDIY函数
timeout(filePaths, successUp, failUp, i, length);
}
},
});
};
timeout(filePaths, successUp, failUp, i, length)
})
return upload;
},
在wx.uploadFile外层套了一个timeout方法，递归调用的时候就调它好啦，成功解决！感谢那位不知名的大神
步骤三：提交图片链接
因为我在提交图片的时候也要提交一些别的参数，所以我就写了个一个submit方法来处理图片链接和其他params，我用wx.request方法来提交，这个大家都懂，我就不废话了
附加小方法：预览和删除
图片预览（点我查看官方文档）
previewImg(e) {
let url = e.currentTarget.dataset.url;
wx.previewImage({
current: url,
urls: this.data.imgs
})
},
长按删除
//js部分
deleteImage(e) {
let that = this;
let imgs = that.data.imgs;
let index = e.currentTarget.dataset.index;
wx.showModal({
title: '提示',
content: '确定要删除此图片吗？',
success: function (res) {
if (res.confirm) {
imgs.splice(index, 1);
}
that.setData({
imgs
});
}
})
},
<!-- 图片是循环出来的所以写了item -->
<image src="{{item}}" bindtap="previewImg" bindlongpress="deleteImage" data-url="{{item}}" data-index="{{index}}"></image>
完结~~~
第一次写文章求鼓励！喜欢的帮我点个赞哦，不明白的地方可以留言，我写的不对的地方请大佬们指教，我会改的，毕竟我只是个小菜鸟（掩面）。
