1.3.0 • Published 3 years ago
qf-upload v1.3.0
qf-upload
基于element-ui上传组件的二次开发,增加了剪贴上传,以及七牛云上传(3.x版本)
Install
npm install qf-upload -S
全局引入 main.js
import QfUpload from 'qf-upload'
Vue.use(QfUpload)
按需引入
import QfUpload from 'qf-upload'
const { QfQiniuUpload, QfUpload } = QfUpload
Vue.use(QfQiniuUpload)
Vue.use(QfUpload)
API
qf-qiniu-upload (七牛上传):
基础用法
<template>
<QfQiniuUpload
:upNum.sync="upNum"
:watermarkConfig="watermarkConfig"
:fileList="fileList"
:qiniuToken="qiniuToken"
:qiniuView="qiniuView"
@successCallback="qiniuFunction"
/>
</template>
七牛上传流程(qf-upload:前端详情参数及方法请查看文档)
准备工作:引入 qiniu-js sdk 3.0版本以上
1.选取文件(客户端)
2.发起请求获取七牛token
>> 约定请求参数:用户判断文件是否为私有;示例:{ is_private: true }
>> 约定返回结构:(组件内部的获取方式已固定,这块数据必须如下返回)
{
"data": {
"token": "", // token
"dir": "", // 上传文件的地址(拼接文件路径)
"domain": "",// 上传文件的域名(拼接文件路径)
}
}
// 文中的 qiniuObj = res.data.data (获取七牛token返回的数据结构,)
3. 调用七牛上传;
qiniu.upload(file, key, qiniuObj.token, putExtra, config)
file:文件对象
key:// `${qiniuObj.dir || 'qiniu'}${this.dir'}/${new Date().getTime()}_${name}` // 文件资源名 加上new Date().getTime()防止文件重名
token: qiniuObj.token
putExtra:{fname: “文件名”, customVars: ”object,用来放置自定义变量 {'x:xxx': ''}“} // customVars 暂时不支持
config:{
useCdnDomain: true,
concurrentRequestLimit: 1, // 并发改为1防止分片上传失败,上传速度会受到影响
}
上传成功之后接口可能没有返回值,组件内部做了成功数据的组装,示例:
uploads = {
id: file.uid,
name,
key,
path: `http://${qiniuObj.domain}/${key}`,
private, // 是否为私有文件 老版本参数(未移除,兼容旧版本数据)
is_private, // 是否为私有 新版本参数
}
// 如果是非私有文件则直接会将文件路径path =>file_path
// uploads.file_path = uploads.path
成功之后会调用 $emit('successCallback', uploads),需要单独处理 uploads 可以调用 successCallback 方法
4. 文件查看(组件内部的文件列表点击钩子)
组件提供了直接访问的方法:调用后端请求:参数为url
示例:qiniuView({url: file.path}).then()
组件方法不满足则自行封装previewFile方法,示例:
>> 获取bucket域名(请求)【文件没有域名的时候需要这一步】
返回bucket域名
>> 获取可访问地址
非私有文件:bucket域名 + key
私有文件:bucket域名 + key 作为参数 调用 请求方法获取可访问的地址
属性 | 说明 | 类型 | 默认值 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
isFileType | 上传文件类型: image | txt | video | audio | xls | xlsx | zip | rar | ppt | String | '' | |
maxSize | 限制上传文件大小 | Number | 500 | |||||||||
title | 文件上传标题 | String | 文件上传' | |||||||||
fileList | 文件列表 | Array | [] | |||||||||
dir | 文件上传路径 | String | 'dev' | |||||||||
num | 最大上传数量 (0/null 则不限制) | Number | 9 | |||||||||
upNum | 判断是否在上传中... | Number | 0 | |||||||||
watermark | 水印 | Boolean | true | |||||||||
watermarkConfig | 水印配置 | Object | {title: '电商服务大平台', img: ''} 需要水印时,水印图只能为本地图片 | |||||||||
private | 文件是否私有(1:私有,0:公开) | Number | 1 | |||||||||
qiniuToken | (请求)获取七牛token | Function | ||||||||||
qiniuView | (请求)七牛文件预览:针对私有文件地址 | Function | 成功返回download_url | |||||||||
previewFile | 文件预览回调(默认地址:file.file_path) | Function | 参数(file文件对象) | |||||||||
successCallback | 上传成功的回调函数 $emit('successCallback', upload) | Function | 参数(成功后的文件upload对象) |
PS: previewFile(文件预览):默认方法限定了返回参数,不满足需要的请自定义 (1.2.0+)组件支持原el-upload所有的Attribute,七牛私有文件的情况下(private=1)定义了list-type为picture/picture-card,需要在回调内部去获取七牛可访问的地址增加url值
qf-upload:
基础用法
<template>
<QfUpload
:upNum.sync="upNum"
:fileList="imgList"
dir="haitian/test"
:uploadsFile="uploadsFile"
@successCallback="qiniuFunction"
@delUploadsFile="delFile"
/>
</template>
属性 | 说明 | 类型 | 默认值 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
isFileType | 上传文件类型: image | txt | video | audio | xls | xlsx | zip | rar | ppt | String | '' | |
maxSize | 限制上传文件大小 | Number | 500 | |||||||||
title | 文件上传标题 | String | 文件上传' | |||||||||
fileList | 文件列表 | Array | [] | |||||||||
dir | 文件上传路径 | String | 'dev' | |||||||||
num | 最大上传数量 (0/null 则不限制) | Number | 9 | |||||||||
upNum | 判断是否在上传中... | Number | 0 | |||||||||
watermark | 水印 | Boolean | true | |||||||||
watermarkConfig | 水印配置 | Object | {title: '电商服务大平台', img: ''} 需要水印时,水印图只能为本地图片 | |||||||||
private | 文件是否私有(1:私有,0:公开) | Number | 1 | |||||||||
uploadsFile | 上传请求 | Function | ||||||||||
previewFile | 文件预览(默认地址:file.full_path) | Function | 参数(file文件对象) | |||||||||
successCallback | 上传成功的回调函数 $emit('successCallback') | Function | ||||||||||
delUploadsFile | 服务器文件删除回调 $emit('delUploadsFile', id) | Function |
PS: previewFile(文件预览):默认方法限定了返回参数,不满足需要的请自定义 (1.2.0+)组件支持原el-upload所有的Attribute,定义了list-type为picture/picture-card,需要返回值携带url值
作者wx: jiang164851219