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

這是一個(gè)上傳圖片示例組件，目的在于展示如何在小程序中編寫(xiě)組件，請(qǐng)不要一點(diǎn)代碼都不改直接拿來(lái)用于生產(chǎn)環(huán)境哦。

組件的關(guān)鍵設(shè)計(jì)思路，請(qǐng)看這篇文章

使用方法和注意事項(xiàng)

• 因?yàn)楸窘M件有大量 ES6 語(yǔ)法，請(qǐng)先勾選小程序開(kāi)發(fā)工具中的“開(kāi)啟 ES6 轉(zhuǎn) ES5 ”選項(xiàng)

• 先在頁(yè)面的 wxml 文件中引入本組件模板，下面的代碼實(shí)例化了兩個(gè)組件實(shí)例。 img1 與 img2 分別是兩個(gè)實(shí)例的 key ，請(qǐng)確保同一個(gè)頁(yè)面中不同實(shí)例的 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>
  

• 然后在頁(yè)面的 js 文件中，先引入組件的類(lèi)，定制各個(gè)組件的初始數(shù)據(jù)，然后實(shí)例化，與上面的代碼對(duì)應(yīng)的寫(xiě)法如下：

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

  licence

  MIT