小程序上传图片

1.因为小程序的api描述都比较简单，并没有wxml及wxss的描述，要想实现小程序demo上的上传图片样式首先需要下载weui.wxss并引入到项目中

小程序版weui下载地址：https://github.com/Tencent/weui-wxss

可以将整个文件下载下来，将其中的dist文件夹导入到独立的小程序中作为参考

把weui.wxss放到自己的项目中后，在app.wxss中import weui.wxss 作为全局样式

/**app.wxss**/
@import "weui.wxss";　　

照着domo把wxml相关内容复制进自己的文件中

 <view class="page__bd">
        <view class="weui-cells">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <view class="weui-uploader">
                        <view class="weui-uploader__hd">
                            <view class="weui-uploader__title">图片上传</view>
                            <view class="weui-uploader__info">{{images.length}}/9</view>
                        </view>
                        <view class="weui-uploader__bd">
                            <view class="weui-uploader__files" id="uploaderFiles">
                                <block wx:for="{{images}}" wx:key="*this">
                                    <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
                                        <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
                                    </view>
                                </block>
                            </view>
                            <view class="weui-uploader__input-box">
                                <view class="weui-uploader__input" bindtap="chooseImage"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
 <button bindtap="uploadImg">确定上传图片</button> 

　根据demo修改相关js:

　首先实现选择图片功能

Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: [],//临时图片地址
  },

  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res);
        var tempFilePaths = res.tempFilePaths
        that.setData({
          images: that.data.images.concat(tempFilePaths)
        })
   
      }
    })
  },
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.images // 需要预览的图片http链接列表
    })
  }
 
})

　在此基础上进行上传图片，上传文件官方方法如下：

 wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }

　发现了尴尬的问题，发现上传图片一次只能传一张

参考了https://www.cnblogs.com/xjwy/p/6956120.html的递归方法，进行多张图片的上传

方法如下:

function uploadimg(data) {
  var that=this;
  var i = data.i ? data.i : 0,//要上传的图片
    success = data.success ? data.success : 0,//上传成功的个数
    fail = data.fail ? data.fail : 0;//上传失败的个数
  wx.uploadFile({
    url: data.url, //开发者服务器 url
    filePath: data.path[i],
    name: 'file',
    formData: {
      'user': 'test'
    },
    success: function (res) {
      success++;
      //do something
    },
    fail: function () {
      fail++;
    },
    complete: function () {
      i++;
      if (i == data.path.length) {
        console.log("success：" + success + "fail" + fail);
      }else{
        data.i = i;
        data.success = success;
        data.fail = fail;
        uploadimg(data);
      }
    }
  })

}　

点击上传按钮后调用该方法，进行图片上传

uploadImg: function (e) {
    var that = this;
    if (that.data.images.length > 0) {
      uploadimg({//调用图片上传uploadimg方法
        url:  that.data.upImgUrl,//这里是你图片上传的接口
        path: that.data.images//这里是选取的图片的地址数组
      });
    } else {
        console.log("没有可上传的文件");
    }
  }

　　全部js代码如下

function uploadimg(data) {
  var that=this;
  var i = data.i ? data.i : 0,//要上传的图片
    success = data.success ? data.success : 0,//上传成功的个数
    fail = data.fail ? data.fail : 0;//上传失败的个数
  wx.uploadFile({
    url: data.url, //开发者服务器 url
    filePath: data.path[i],
    name: 'file',
    formData: {
      'user': 'test'
    },
    success: function (res) {
      success++;
      //do something
    },
    fail: function () {
      fail++;
    },
    complete: function () {
      i++;
      if (i == data.path.length) {
        console.log("success：" + success + "fail" + fail);
      }else{
        data.i = i;
        data.success = success;
        data.fail = fail;
        uploadimg(data);
      }
    }
  })

}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: [],//临时图片地址
    upImgUrl: 'https://........'//上传图片服务器地址
  },

 
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res);
        var tempFilePaths = res.tempFilePaths
        that.setData({
          images: that.data.images.concat(tempFilePaths)
        })
      }
    })
  },
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.images // 需要预览的图片http链接列表
    })
  },
  uploadImg: function (e) {
    var that = this;
    if (that.data.images.length > 0) {
      uploadimg({
        url:  that.data.upImgUrl,//这里是你图片上传的接口
        path: that.data.images//这里是选取的图片的地址数组
      });
    } else {
        console.log("没有可上传的文件");
    }
  }
})

　小程序还在摸索阶段没实际开发测试过，暂时先记录下