组件服务器 d,小程序通用型图片上传服务器组件

更新记录

v1.3(2020-08-28)

1.去除引入的icon.css，防止启动报错

2.js的引入路径大家自定义一下哈

v1.2(2020-08-27)

1.修改v1.1版本新增的编辑场景的bug

2.增加在同一页面多次复用同一组件需要进行 $ref进行绑定的说明；

3.在使用过程中请在下面留言邮箱号进行问题沟通回复，谢谢！

查看更多

upload-picture 组件page中使用方法

使用方法

:bizType='bizType' :limitSize='limitSize' @update:imageList="updateImageList" :imageList.sync="imageList">

//特别提醒：

//在同一页面使用多个相同组件时需要进行ref绑定取值

:limitCount='limitCount' :sizeType='sizeType' :sourceType='sourceType'

:bizType='bizType' ref='contractVoucher' :limitSize='limitSize' :imageList.sync="contractImageList">

:limitCount='limitCount' :sizeType='sizeType' :sourceType='sourceType'

:bizType='bizType' ref='paymentVoucher' :limitSize='limitSize' :imageList.sync="contractImageList">

this.imgListA = this.$refs.contractVoucher.imgList

this.imgListB = this.$refs.paymentVoucher.imgList

//在data中绑定

//imageList 对应上边绑定的imageList

//@update:imageList="updateImageList" 动态事件，支持动态实时获取图片数组

// updateImageList(list){

// this.imgList = list

//}

data() {

return {

//使用场景，支持新增上传场景及编辑图片场景，新增-add,编辑-edit

type:'add',

// 服务器文件夹，可以指定某特定业务上传到服务器那个文件夹下，便于查找

bizType:'market',

//限制图片大小，单位M

limitSize:3,

//连续选择上传的数量，默认是9

limitCount:'3',

// 上传服务器成功后组件返回的url数组

imageList: [],

//可以指定是原图还是压缩图，默认二者都有

sizeType:['original', 'compressed'],

//从相册和文件选择，默认二者都有

sourceType:['album', 'camera'],

}

},

参数

类型

是否必填

参数描述

type

String

否

组件使用场景，add新增 edit编辑

imageList

Array

否

图片数据展示(暂不支持视频)

limitCount

Number

否

上传图片最大个数

limitSize

Number

否

上传大小(默认为3M)

sizeType

Array

否

指定原图还是压缩图

sourceType

Array

否

指定来源，相机或者文件

bizType

String

否

服务器文件夹，建议自己定义，默认market