@forzoom/uploader v0.3.0

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

Events

load

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

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

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

finish

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

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

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

函数

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是否没有用了