Forzoom
Install
npm install @forzoom/uploader
Desc
提供三种组件
- Uploader
- WechatUploader
- 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
图片信息
- key: 文件在后端的标识符
- url: 表示图片存储在网络上的地址。
- image: 表示可以用来展示的图片内容，一般是 WechatUploader。
- mode: 'input' | 'wechat'
- localId: 微信jssdk中的localId
- serverId: 微信jssdk中的serverId
- file: 图片文件
- objectUrl: 有file转换而成的objectUrl，单独使用一个变量是因为需要调用revoke方法进行资源释放。
Roadmap
- image之间添加间距
- 更新rollup版本
- 目前会忽略chooseImage中的cancel和error信息
- transformLocalImageData是否没有用了