微信小程序图片上传组件“mp-uploader“(weui)

Posted 征途黯然.

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序图片上传组件“mp-uploader“(weui)相关的知识,希望对你有一定的参考价值。

使用示例

  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,//最大上传数
    files: [],  //上传组件绑定的文件urls
    sizeType: ['compressed'], //压缩上传,可以是['original', 'compressed']
    sourceType: ['album', 'camera'], //相册,或拍照
  ,

  onLoad: function (options) 
    this.setData(
    	//通过bind(this)将函数绑定到this上,以后函数内的this就是指全局页面
    	//setdata以后,这两个函数就可以传递给mp-uploader了
      selectFile: this.selectFile.bind(this),  
      uplaodFile: this.uplaodFile.bind(this)
    )
  , 
  
  //mpuploader选择图片时的过滤函数,返回true表示图片有效
  selectFile(files) 
    wx.showLoading( title: '', )
    // 如果有大文件可以压缩一下
    // 返回false可以阻止本次文件上传
  ,


  uplaodFile(files)    
    // 图片上传的函数,必须返回Promise
    //Promise的callback里面必须resolve(urls)表示成功,否则表示失败
    return new Promise((resolve, reject) =>          
      const tempFilePaths = files.tempFilePaths;
      const that = this;
      let finished = url:[]  //本次上次成功的URL存入这个变量,被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]  //云存储文件名

        wx.cloud.uploadFile(
          filePath, cloudPath,

          //成功
          success: function (res) 
            if (res.statusCode != 200 && res.statusCode != 204 && res.statusCode != 205) reject('error')// 可能会有好几个200+的返回码,表示成功
            
            finished.url.push(url:res.fileID)     //成功一个存一个到本次上传成功列表
            //如果本次上传的文件都完成 或全局已经存满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表示删除的图片的下标,item为图片对象。
  delimg(e) 
    this.data.files.splice(this.data.files.findIndex(item => item == e.detail.item), 1)
   

)

关于weui

  weui是微信官方提供的一款小程序插件,是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队设计。官方文档:https://wechat-miniprogram.github.io/weui/docs/

  图片上传组件mp-uploader的属性:

属性类型默认值必填说明
ext-classstring添加在组件内部结构的class,可用于修改组件内部的样式
titlestring图片上传组件标题
tipsstring组件的提示
deleteboolean是否显示删除按钮
size-typearray和chooseImage的sizeType参数一样
source-typearray和chooseImage的sourceType参数一样
max-sizenumber5 * 1024 * 1024图片上传的最大文件限制,默认是5M
max-countnumber1图片上传的个数限制
filesarray当前的图片列表
selectfunction选择图片时的过滤函数,返回true表示图片有效
uploadfunction图片上传的函数,返回Promise,Promise的callback里面必须resolve(urls)表示成功,否则表示失败
bindselecteventhandler图片选择触发的事件,detail为tempFilePaths, tempFiles, contents,其中tempFiles和tempFilePaths是chooseImage返回的字段,contents表示所选的图片的二进制Buffer列表
bindcanceleventhandler取消图片选择的事件,detail为
bindsuccesseventhandler图片上传成功的事件,detail为urls,urls为upload函数上传成功返回的urls参数
bindfaileventhandler图片上传失败的事件,detail为type, errMsg,type为1表示图片超过大小限制,type为2表示选择图片失败,type为3表示图片上传失败。
binddeleteeventhandler删除图片触发的事件,detail为index, item,index表示删除的图片的下标,item为图片对象。

以上是关于微信小程序图片上传组件“mp-uploader“(weui)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 - 上传图片组件

微信小程序(14)--上传图片公用组件

微信小程序(15)--上传图片公用组件

微信小程序组件库解析:图片上传与排序组件yImgPro

微信小程序图片压缩

微信小程序上传图片及上传到上传到七牛云