使用示例

??wxml

<mp-uploader 
	files="{{files}}"  
	max-count="{{maximgs}}" 
	max-size="{{10 * 1024 * 1024}}" 
	title="圖片上傳" 
	tips="最多上傳三張圖片"
	size-type="{{sizeType}}" 
	sourceType="{{sourceType}}" 
	delete="{{true}}" 
	select="{{selectFile}}" 
	upload="{{uplaodFile}}"
	binddelete="delimg"
	bindfail="uploadError" 
	bindsuccess="uploadSuccess" 
></mp-uploader>

??json

{
  "usingComponents": {
    "mp-toptips": "weui-miniprogram/toptips/toptips",
    "mp-form": "weui-miniprogram/form/form",
    "mp-uploader": "weui-miniprogram/uploader/uploader",
    "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
    "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  }
}

??js

// pages/default/default.js
const app = getApp()
Page({
  data: {
    //mp-uploader
    maximgs:5,//最大上傳數(shù)
    files: [],  //上傳組件綁定的文件urls
    sizeType: ['compressed'], //壓縮上傳,可以是['original', 'compressed']
    sourceType: ['album', 'camera'], //相冊(cè),或拍照
  },

  onLoad: function (options) {
    this.setData({
    	//通過bind(this)將函數(shù)綁定到this上,以后函數(shù)內(nèi)的this就是指全局頁(yè)面
    	//setdata以后,這兩個(gè)函數(shù)就可以傳遞給mp-uploader了
      selectFile: this.selectFile.bind(this),  
      uplaodFile: this.uplaodFile.bind(this)
    })
  }, 
  
  //mpuploader選擇圖片時(shí)的過濾函數(shù)，返回true表示圖片有效
  selectFile(files) {
    wx.showLoading({ title: '', })
    // 如果有大文件可以壓縮一下
    // 返回false可以阻止本次文件上傳
  },


  uplaodFile(files) {   
    // 圖片上傳的函數(shù)，必須返回Promise
    //Promise的callback里面必須resolve({urls})表示成功，否則表示失敗
    return new Promise((resolve, reject) => {         
      const tempFilePaths = files.tempFilePaths;
      const that = this;
      let finished = {url:[]}  //本次上次成功的URL存入這個(gè)變量,被success方法的e.detail承接

      for (var i = 0; i < tempFilePaths.length; i++) {
        let filePath = tempFilePaths[i]  //原名
        let cloudPath = 'qyzj' + new Date().getTime() + '-' + i + filePath.match(/\.[^.]+?$/)[0]  //云存儲(chǔ)文件名

        wx.cloud.uploadFile({
          filePath, cloudPath,

          //成功
          success: function (res) {
            if (res.statusCode != 200 && res.statusCode != 204 && res.statusCode != 205) reject('error')// 可能會(huì)有好幾個(gè)200+的返回碼，表示成功
            
            finished.url.push({url:res.fileID})     //成功一個(gè)存一個(gè)到本次上傳成功列表
            //如果本次上傳的文件都完成 或全局已經(jīng)存滿3張,resolve退出
            if (finished.urls.length === tempFilePaths.length || that.data.files.length +finished.urls.length == this.data.maximgs)
            resolve(finished)
          },

          //失敗
          fail: function (err) { console.log(err) }
        })
      }
    })
  },

  uploadError(e) {
    console.log('upload error', e.detail)
    wx.hideLoading()
    this.setData({ error: "上傳失敗,可能有些照片過大" })
  },
  uploadSuccess(e) {
    console.log('upload success', e.detail)
    this.data.files=this.data.files.concat(e.detail.url)
    this.setData({files:this.data.files})
    wx.hideLoading()
  },

  //刪除圖片 detail為{index, item}，index表示刪除的圖片的下標(biāo)，item為圖片對(duì)象。
  delimg(e) {
    this.data.files.splice(this.data.files.findIndex(item => item == e.detail.item), 1)
  } 

})

關(guān)于weui

??weui是微信官方提供的一款小程序插件，是一套基于樣式庫(kù)weui-wxss開發(fā)的小程序擴(kuò)展組件庫(kù)，同微信原生視覺體驗(yàn)一致的UI組件庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)和小程序團(tuán)隊(duì)設(shè)計(jì)。官方文檔：https://wechat-miniprogram.github.io/weui/docs/。

??圖片上傳組件mp-uploader的屬性：文章來源地址http://www.zghlxwxcb.cn/news/detail-500097.html

到了這里，關(guān)于【微信小程序】圖片上傳組件“mp-uploader“(weui)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！