小程序上傳圖片

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("沒有可上傳的文件");
    }
  }
})

　小程序還在摸索階段沒實際開發測試過，暫時先記錄下