微信开发者工具实现图片上传的避雷总结
目录
- 微信开发者工具实现图片上传的避雷总结
- 1.技术概述
- 2.技术详述
- 图片上传
- 效果图
- wxml部分的代码和介绍
- js部分goodsUpload代码和介绍
- 过程难点
- 流程图
- 3.技术使用中遇到的问题和解决过程
- 图片上传失败的问题
- 接收返回数据有误的问题
- 4.总结
- 完整代码
- 参考文章
1.技术概述
小程序图片上传技术是大家在小程序开发中必须要掌握的功能，学习该技术可以参考微信开发者工具文档，我也是一步步摸索来的，在这里对我这次完成的图片上传功能进行一个小总结。
2.技术详述
图片上传
效果图
先来看看大致的效果图
点击图标后，从文件夹中选择图片即可上传成功
wxml部分的代码和介绍
<view>
<van-cell>
<text class="label">图片上传</text>
<view class="img_box">
<view class="upload_img" wx:for="{{goods_fileList}}" wx:key="index">
<image src='{{item.imageLink}}' class="imgs" bindtap="goodsListenerButtonPreviewImage" data-index="{{index}}" mode='widthFix' />
<image class="closeImv" src="../../icons/delete.png" mode="scaleToFill" catchtap="goodsDeleteImage" data-id="{{index}}"></image>
</view>
<view class="upload_img" hidden="{{goods_add_img}}">
<view bindtap="goodsUpload">
<image src="../../icons/add_img.png" class="upload_img" mode='widthFix' />
</view>
</view>
</view>
</van-cell>
</view>大致介绍:在wx:for中，大家可以看到我使用goods_fileList来存储我上传图片后，服务器返回的图片链接，并通过遍历整个图片列表，将图片通过img标签进行显示。同时我还在图片的右上方显示一个删除图标，用以上传图片的删除。上传图片的功能通过点击照相机图片打开本地文件夹或者是手机相册，触发goodsUpload函数，对要上传的图片进行选择。插一嘴，在这里我有使用vant组件库的van-cell组件，需要大家在json文件的usingComponent添加
js部分goodsUpload代码和介绍
let that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 1000
})使用wx.chooseImage微信图片API对函数进行编写，官方参考,设置上传图片来源和图片类型
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = []; //定义临时文件夹
let init = that.data.goods_fileList.length;
for (var i = 0; i < res.tempFilePaths.length; i++) {
if (init + i < that.data.max_upload)
tempFilePaths.push(res.tempFilePaths[i]);
else {
wx.showModal({
title: '提示',
content: '图片最多上传三张',
})
break;
}
}
if (tempFilePaths.length + init == that.data.max_upload) {
that.setData({
goods_add_img: true,
})
}设置用户上传图片上限为3。因为毕竟小程序的空间有限，不可能任由顾客不断上传，因此，这一步我设置临时文件夹将已上传的图片链接赋值到临时文件夹中，当出现用户上传数量大于3时，提示用户不能继续上传，同时将图片上传的点击按钮图片隐藏，不给用户继续上传的机会，除非用户删除图片。
//上传文件
wx.uploadFile({
url: that.data.goods_uploadUrl,
filePath: tempFilePaths[i],
name: 'image',
header: {
"Content-Type": "multipart/form-data",
'Cookie': wx.getStorageSync('sessionid'),
'token': app.globalData.token
},
success: function(res) {
let imageFile = that.data.goods_fileList;
console.log(imageFile);
//如果是最后一张,则隐藏等待中
if (i == tempFilePaths.length) {
wx.hideToast();
}
let image = {
id: "",
imageLink: ""
};
const data = JSON.parse(res.data)
image.id = data.data.id;
image.imageLink = data.data.imageLink;
imageFile.push(image);
that.setData({
goods_fileList: imageFile,
})
},
fail: function(res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function(res) {}
})
}
});
}
}
})
},使用wx.uploadFile的API将临时文件夹中新上传的图片上传至服务器，接收上传成功的返回值res，并将res结果进行解析，将图片在服务器上的地址赋值到图片列表中进行展示。
过程难点
本阶段的难点在于两个微信图片上传API的嵌套使用，包括如何从chooseImg中获取临时文件路径，和图片上传至服务器可能在大家编写的过程中容易出现不成功的问题，笔者将代码稍后会将完整代码放置最后，欢迎大家学习和指教。
流程图
3.技术使用中遇到的问题和解决过程
图片上传失败的问题
1. 手机真机调试失败但是电脑上传没有问题的情况
在这个问题上，我可算是吃了一个楞头亏，好巧不巧，提示的信息是我的上传数据未被定义，但是电脑上传毫无问题。根据提示，我搜遍了整个网络，没有发现类似蹊跷的事情，毫无方向。和我对接的后端同学也表示"爱莫能助"，而我自己也毫无头绪。我们都觉得，报错信息提示我的数据未被定义，必然是前端的问题。但是，经过打击的我没有办法，希望通过看看后端同学接收请求的结果试图找出自己的错误。错误的原因是微信上传图片的路径字符大于100，后端同学的数据库空间开的太小了，根本存不下，导致的我没有接收到返回数据，图片列表里没有图片，才找不到属性值。因此，大家遇到问题，一定要面向错误提示修改，团队合作中，也不妨看看协作同学的设计，彼此真是都涨了见识。
接收返回数据有误的问题
2. 获取数据类型不对的问题。
一开始我在图片上传成功后的success函数中接收图片链接的方式是通过res.data.data.imageLink的方式进行访问的，但是获取不到数据，打印出的数据为null，经过我在百度上的查找，我寻找到获取不到res.data下的data解决方法,之所以发生的原因网上并没有介绍，只给出了解决方法，需要进行json解析。我通过csdn提问的回答是后端的数据格式没有处理好，我的提问链接，但也有一种说法是，上传图片后返回的路径就需要这样才能够获取，大家如果遇到类似问题可以尝试一下。
4.总结
之所以选择实现图片上传编写这篇技术博客主要还是因为自己在这上面踩了两个坑，希望和大家分享，能够帮助到其他开发者，同时也希望能够得到大家的建议。另外，我认为图片上传是一个基础但是又有一定难度的功能，因此希望能够帮助到大家，给大家提供借鉴。自己的话，还有很多的不足需要改进，这是我第一次编写微信小程序，很多技术还要继续熟练学习。
完整代码
/**
* 二手交易上传图片方法
*/
goodsUpload() {
let that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 1000
})
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = []; //定义临时文件夹
let init = that.data.goods_fileList.length;
for (var i = 0; i < res.tempFilePaths.length; i++) {
if (init + i < that.data.max_upload)
tempFilePaths.push(res.tempFilePaths[i]);
else {
wx.showModal({
title: '提示',
content: '图片最多上传三张',
})
break;
}
}
if (tempFilePaths.length + init == that.data.max_upload) {
that.setData({
goods_add_img: true,
})
}
//上传完成后把文件上传到服务器
for (var i = 0, h = tempFilePaths.length; i < h; i++) {
console.log(tempFilePaths[i]);
//上传文件
wx.uploadFile({
url: that.data.goods_uploadUrl,
filePath: tempFilePaths[i],
name: 'image',
header: {
"Content-Type": "multipart/form-data",
'Cookie': wx.getStorageSync('sessionid'),
'token': app.globalData.token
},
success: function(res) {
let imageFile = that.data.goods_fileList;
console.log(imageFile);
//如果是最后一张,则隐藏等待中
if (i == tempFilePaths.length) {
wx.hideToast();
}
let image = {
id: "",
imageLink: ""
};
const data = JSON.parse(res.data)
image.id = data.data.id;
image.imageLink = data.data.imageLink;
imageFile.push(image);
that.setData({
goods_fileList: imageFile,
})
},
fail: function(res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function(res) {}
})
}
});
}
}
})
},参考文章
