小程序模板网

小程序开发二三事:变相实现多图片上传

作者:加菲猫,来自原文地址

开发中总会需要文件上传的功能(比如图片上传),微信提供了wx.uploadFile(OBJECT)方法,用来将文件上传至服务器。

上传图片之前自然需要选择图片,小程序API -- wx.chooseImage(OBJECT)。就是从本地相册选择图片或者使用相机拍照。

OBJECT参数说明如下:

 

				
  1. wx.chooseImage({
  2.  
  3.   count: 9, //最多可以选择的图片数,默认为9
  4.  
  5.   sizeType: ['orignal','compressed'], //original 原图,compressed 压缩图,默认二者都有
  6.  
  7.   sourceType: ['album', 'camera'], //album 从相册选图,camera 使用相机,默认二者都有
  8.  
  9.   success: function(){}, //成功则返回图片的本地文件路径列表 tempFilePaths
  10.  
  11.   fail: function(){}, //接口调用失败的回调函数
  12.  
  13.   complete: function(){} //接口调用结束的回调函数(调用成功、失败都会执行)
  14. })

success返回参数: tempFilePaths: 图片的本地文件路径列表

wx.uploadFile(OBJECT)

 

				
  1. wx.uploadFile({
  2. url: 'http://example.weixin.qq.com/upload', //开发者服务器 url
  3. filePath: tempFilePaths[0],//要上传文件资源的路径
  4. name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
  5. formData:{ //HTTP 请求中其他额外的 form data
  6. 'user': 'test'
  7. },
  8. success: function(res){
  9. var data = res.data
  10. //do something
  11. }
  12. })

在chooseImage回调函数里调用上传方法!

前久,做了一个如上图的图片上传功能!直接上代码吧:

 

				
  1. /* 函数描述:作为上传文件时递归上传的函数体体;
  2. * 参数描述:
  3. * filePaths是文件路径数组
  4. * successUp是成功上传的个数
  5. * failUp是上传失败的个数
  6. * i是文件路径数组的指标
  7. * length是文件路径数组的长度
  8. */
  9. uploadDIY(filePaths,successUp,failUp,i,length){
  10. var that = this;
  11. app.toastShow(0,"图片上传中...",20000000,1);
  12. wx.uploadFile({
  13. url: '/uploadurl/',
  14. filePath: filePaths[i],
  15. name: 'file',
  16. formData:{
  17. 'user': 'test'
  18. },
  19. success: (res) => {
  20. successUp++;
  21. var srcArr = that.data.src;
  22. srcArr.push(filePaths[i]),
  23. that.setData({
  24. src : srcArr
  25. });
  26.  
  27. var data = JSON.parse(res.data);
  28. var newpicKeys = that.data.picKeys;
  29. newpicKeys.push(data.data['pic_key']);
  30. that.setData({
  31. picKeys: newpicKeys
  32. });
  33. },
  34. fail: (res) => {
  35. that.setData({
  36. isuploaderror: 1
  37. });
  38. failUp ++;
  39. },
  40. complete: () => {
  41. i ++;
  42. if(i == length){
  43. wx.hideToast();
  44. var txt = '总共'+successUp+'张上传成功,'+failUp+'张上传失败!';
  45. app.toastShow(0,txt,2000,1);
  46. }else{ //递归调用uploadDIY函数
  47. if(that.data.isuploaderror){
  48. app.toastShow(0,'图片上传失败,请重新选择上传',2000,1);
  49. }else{
  50. this.uploadDIY(filePaths,successUp,failUp,i,length);
  51. }
  52. }
  53. }
  54. });
  55. },
  56. uploadImage:function(e){
  57. var that = this;
  58. that.setData({
  59. isuploaderror: 0
  60. });
  61. var nowLen = that.data.src.length;
  62. var remain = 9 - nowLen;
  63. wx.chooseImage({
  64. count: remain,
  65. sizeType: ['original', 'compressed'],
  66. sourceType: ['album', 'camera'],
  67. success: (res) => {
  68. var successUp = 0; //成功个数
  69. var failUp = 0; //失败个数
  70. var length = res.tempFilePaths.length; //总共个数
  71. var i = 0; //第几个
  72. this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
  73. },
  74. });
  75. }

因为wx.uploadFile只能单个文件上传,所以需要变相的实现多文件上传,即,complete回调里调用uploadDIY调用函数本身~ 直到i==length!



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23589.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询