微信小程序图片上传组件“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-class | string | 否 | 添加在组件内部结构的class,可用于修改组件内部的样式 | |
title | string | 图片上传 | 否 | 组件标题 |
tips | string | 否 | 组件的提示 | |
delete | boolean | 是 | 是否显示删除按钮 | |
size-type | array | 是 | 和chooseImage的sizeType参数一样 | |
source-type | array | 是 | 和chooseImage的sourceType参数一样 | |
max-size | number | 5 * 1024 * 1024 | 是 | 图片上传的最大文件限制,默认是5M |
max-count | number | 1 | 否 | 图片上传的个数限制 |
files | array | 否 | 当前的图片列表 | |
select | function | 否 | 选择图片时的过滤函数,返回true表示图片有效 | |
upload | function | 否 | 图片上传的函数,返回Promise,Promise的callback里面必须resolve(urls)表示成功,否则表示失败 | |
bindselect | eventhandler | 否 | 图片选择触发的事件,detail为tempFilePaths, tempFiles, contents,其中tempFiles和tempFilePaths是chooseImage返回的字段,contents表示所选的图片的二进制Buffer列表 | |
bindcancel | eventhandler | 否 | 取消图片选择的事件,detail为 | |
bindsuccess | eventhandler | 否 | 图片上传成功的事件,detail为urls,urls为upload函数上传成功返回的urls参数 | |
bindfail | eventhandler | 否 | 图片上传失败的事件,detail为type, errMsg,type为1表示图片超过大小限制,type为2表示选择图片失败,type为3表示图片上传失败。 | |
binddelete | eventhandler | 否 | 删除图片触发的事件,detail为index, item,index表示删除的图片的下标,item为图片对象。 |
以上是关于微信小程序图片上传组件“mp-uploader“(weui)的主要内容,如果未能解决你的问题,请参考以下文章