用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:32

作者:加菲猫,来自原文地址开发中总会需要文件上传的功能(比如图片上传),微信提供了wx.uploadFile(OBJECT)方法,用来将文件上传至服务器。上传图片之前自然需要选择图片,API -- wx.chooseImage(OBJECT)。就是从 ...

作者:加菲猫,来自

原文地址

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

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

OBJECT参数说明如下:

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

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. var data = JSON.parse(res.data);
  27. var newpicKeys = that.data.picKeys;
  28. newpicKeys.push(data.data['pic_key']);
  29. that.setData({
  30. picKeys: newpicKeys
  31. });
  32. },
  33. fail: (res) => {
  34. that.setData({
  35. isuploaderror: 1
  36. });
  37. failUp ++;
  38. },
  39. complete: () => {
  40. i ++;
  41. if(i == length){
  42. wx.hideToast();
  43. var txt = '总共'+successUp+'张上传成功,'+failUp+'张上传失败!';
  44. app.toastShow(0,txt,2000,1);
  45. }else{ //递归调用uploadDIY函数
  46. if(that.data.isuploaderror){
  47. app.toastShow(0,'图片上传失败,请重新选择上传',2000,1);
  48. }else{
  49. this.uploadDIY(filePaths,successUp,failUp,i,length);
  50. }
  51. }
  52. }
  53. });
  54. },
  55. uploadImage:function(e){
  56. var that = this;
  57. that.setData({
  58. isuploaderror: 0
  59. });
  60. var nowLen = that.data.src.length;
  61. var remain = 9 - nowLen;
  62. wx.chooseImage({
  63. count: remain,
  64. sizeType: ['original', 'compressed'],
  65. sourceType: ['album', 'camera'],
  66. success: (res) => {
  67. var successUp = 0; //成功个数
  68. var failUp = 0; //失败个数
  69. var length = res.tempFilePaths.length; //总共个数
  70. var i = 0; //第几个
  71. this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
  72. },
  73. });
  74. }

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

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏