下載地址：http://www.xcxwo.com/component/view/968fecf52f5be979371d2cac26a90131

這是一個上傳圖片示例組件，目的在于展示如何在小程序中編寫組件，請不要一點代碼都不改直接拿來用于生產環境哦。

組件的關鍵設計思路，請看這篇文章

使用方法和注意事項

• 因為本組件有大量 ES6 語法，請先勾選小程序開發工具中的“開啟 ES6 轉 ES5 ”選項

• 先在頁面的 wxml 文件中引入本組件模板，下面的代碼實例化了兩個組件實例。 img1 與 img2 分別是兩個實例的 key ，請確保同一個頁面中不同實例的 key 不一樣 ：

  <!--index.wxml-->
  <import src="../common/image_uploader/image_uploader.wxml" />
  <view class="container">
  <template is="image_uploader" data="{{...img1}}" />
  <template is="image_uploader" data="{{...img2}}" />
  </view>
  

• 然后在頁面的 js 文件中，先引入組件的類，定制各個組件的初始數據，然后實例化，與上面的代碼對應的寫法如下：

  //index.js
  const ImageUploader = require('../common/image_uploader/image_uploader.js');
  Page({
  data: {
    img1: ImageUploader.mergeData({
      imageUploadTitle: '定制標題1',//組件的標題
  
      sourceType: ['camera', 'album'], //上傳圖片的來源，相機/相冊
      sizeType: ['compressed'],//上傳前是否壓縮，默認壓縮
      maxCount: 1,//一次選擇圖片的數量
      //以上三個配置項詳情請看小程序文檔
  
      uploadedImagesPaths: [],//用數組保存已上傳的圖片路徑，也可以設置初始時就顯示的圖片
      uploadParams: {
          url: '',//后臺接收上傳圖片的路徑
          name: 'file',//后臺依靠這個字段拿到文件對象
          formData: {}//這個字段可以設置傳到后臺的額外的參數
          //以上三個配置項詳情請看小程序文檔
      }
    }),
    img2: ImageUploader.mergeData({
      imageUploadTitle: '定制標題2'
    })
  },
  onLoad: function(){
    new ImageUploader(this, 'img1');//第一個參數必須是 this ，指向 page 實例；第二個參數是組件的 key
    new ImageUploader(this, 'img2');
  }
  });
  

  licence

  MIT