微信小程序上传图片组件源码及demo
这是一个上传图片示例组件，目的在于展示如何在小程序中编写组件，请不要一点代码都不改直接拿来用于生产环境哦。
组件的关键设计思路，请看这篇文章
使用方法和注意事项 因为本组件有大量 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
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
