@forzoom/uploader

Install

npm install @forzoom/uploader

Desc

提供三种组件

1. Uploader
2. WechatUploader
3. InputUploader

Usage

import Vue from 'vue';
import Uploader from '@forzoom/uploader';
Vue.use(Uploader, {
	.. // 额外配置
})

WechatUploader

大致上存在四种元素，分别是“容器”，“图片元素”，“添加按钮”，“图片容器” 嵌套结构为

1. “容器”
    2. “图片容器”
	    3. “图片元素”
	    3. 其他元素
    2. “添加按钮”

上图中，“咖啡”图片实际上有一个“图片容器”和一个“图片元素”组成 第三个是一个“添加按钮” 点击添加按钮能够调用JSSDK中的图片上传逻辑

根据需要，可以使用Props中的样式内容修改不同元素的样式

Props

名称	默认	说明
size	1	允许最大上传图片数量
canModify	true	是否允许修改
containerClass	{}	“容器”元素样式类
containerStyle	{}	“容器”元素样式
imageClass	{}	每个“图片元素”样式类
imageStyle	{}	每个“图片元素”样式
requestClass	{}	“添加按钮”样式类
requestStyle	{}	“添加按钮”样式
imageWrapClass	{}	“图片容器”样式类
imageWrapStyle	{}	“图片容器”样式
useWechatPreview	true	是否使用微信JSSDK预览
lazyload	false	是否使用vue-lazyload

Events

名称	参数	说明
load	无	图片上传到微信服务器开始
finish	无	图片上传到微信服务器结束
add	{ localId, serverId, }	有图片增加
remove	index (被删除图片位置)	有图片被删除
click	index (被点击图片位置)	当正在显示的图片被点击
choose	{ localIds }	图片来源
startRequest	无	request开始
endRequest	无	request结束
error	错误信息	发生错误

load

图片开始上传到微信服务器，一般配置finish事件使用

<WechatUploader @load="onLoad">
</WechatUploader>

export default {
	methods: {
		onLoad() {
			// 展示加载动画
		},
	},
};

finish

图片上传到微信服务器结束，一般配置load事件使用

<WechatUploader @finish="onFinish">
</WechatUploader>

export default {
	methods: {
		onFinish() {
			// 隐藏加载动画
		},
	},
};

函数

名称	参数	说明
request	无	发起图片上传
removeAll	无	删除所有图片
setImages	无	设置默认显示的图片
getImages	无	获得所有图片

Example

WechatUploader.setImages

设置uploader中默认的图片内容（注意，如果uploader被销毁的情况下，设置的内容自然也会消失）

html

<!-- size="4": 显示多少个图片 -->
<!-- can-modify="false": 不允许修改，只允许查看 -->
<WechatUploader
	ref="uploader"
	:size="4"
	:can-modify="true">
</WechatUploader>

script

this.$refs.uploader.setImages([
	{
		image: '...', // 可以是url或者localId
		serverId: '...', // 可以不传入
	},
]);

WechatUploader.getImages

获得uploader中当前的图片内容

const images = this.$refs.uploader.getImages();

// 结果是
[
	{
		image: '...',
		serverId: '...',
	},
]

Types

// 表示<Uploader>组件的interface
export interface UploaderComponent {..}
// 表示<WechatUploader>组件的interface
export interface WechatUploaderComponent {..}
// 表示<InputUploader>组件的interface
export interface InputUploaderComponent {..}

ImageInfo

图片信息

1. key: 文件在后端的标识符
2. url: 表示图片存储在网络上的地址。
3. image: 表示可以用来展示的图片内容，一般是 WechatUploader。
4. mode: 'input' | 'wechat'
5. localId: 微信jssdk中的localId
6. serverId: 微信jssdk中的serverId
7. file: 图片文件
8. objectUrl: 有file转换而成的objectUrl，单独使用一个变量是因为需要调用revoke方法进行资源释放。

Roadmap

1. image之间添加间距
2. 更新rollup版本
3. 目前会忽略chooseImage中的cancel和error信息
4. transformLocalImageData是否没有用了