ct-adc-uploader

上传组件。支持图片/文件

在线demo

在线demo

功能点

1. 支持上传图片和文件
2. 支持配置图片上传的各种限制内容（如是否可重复，文件大小，文件类型等）
3. [图片]设置可变的缩略图大小

使用

从npm安装ct-adc-uploader

npm install ct-adc-uploader --save

在代码中使用

import Uploader from 'ct-adc-uploader';

//全局注册
Vue.component(Uploader.name, Uploader);

//局部注册

new Vue({
...
components:{
Uploader
},
...
})

props

参数|说明|类型|默认值 | 可选值 | 描述 | --- | --- | --- | --- | --- | ---- | accept详细说明 | 上传文件类型限制 | Object | null | object/null | 设置允许上传的图片的格式 auto | 是否自动上传文件 | Boolean | false | true/false | 上传方式为自动还是手动 chunked | 是否分片上传文件 | Boolean | false | true/false | chunkSize | 分片大小 | Number | 5242880 即5M | 数字 | 如果要分片，分多大一片？ 默认大小为5M. 单位: Byte chunkRetry | 分片重传 | Number | 2 | 整数 | 如果某个分片由于网络问题出错，允许自动重传多少次 compress详细说明 | 是否压缩图片 | Object/Boolean | false | false或object(压缩选项) | 上传前是否压缩图片false disabled | 是否禁用组件 | Boolean | false | true/false | 是否禁用组件 duplicate | 是否可重复上传 | Boolean | false | true/false | 是否允许同样的图片上传两张 fileNumLimit | 可上传文件数量 | Number | 5 | 整数 | 最多可上传几个文件 files | 已上传的文件 | Array | [] | 每项为一个文件线上链接的数组 | 初始文件列表 fileSingleSizeLimit | 单个文件的大小限制 | Number | 2 * 1024 * 1024 | 整数 | 单位: Byte fileSizeLimit | 文件总大小限制 | Number | 10 * 1024 * 1024 | 整数 | 允许上传的文件总大小 fileVal | 文件上传域的name | String | 'file' | 字符串 | 设置文件上传域的name formData | 表单数据 | Object | {} | | 上传图片时附加的表单数据 headers | 自定义请求hearder | Object | {} | 请求头 | 需要自定义的请求hearder method | 上传请求类型 | String | 'post' | http方法 | 上传图片的ajax请求类型 multiple | 是否可多选 | Boolean | false | true/false | 是否可多选文件 resultFilter | 上传结果过滤器 | Function | new Function() | | 将响应数据处理为固定格式结果的过滤器 sendAsBinary | 是否以二进制方式方式传输 | Boolean | false | true/false | 是否以二进制方式方式传输, 默认按Blob格式 server | 接口地址 | String | '' | | 上传图片的接口地址，由后端人员给出 threads | 上传并发数 | Number | 3 | 整数 | 允许同时最大上传进程数

图片上传配置

参数|说明|类型|默认值 | 可选值 | 描述 | --- | --- | --- | --- | --- | ---- | acceptWidth | 允许的图片的宽度 | Number | 0（不限制） | 任意非负整数 | 允许的图片的宽度 acceptHeight | 允许的图片的高度 | Number | 0（不限制） | 任意非负整数 | 允许的图片的高度 thumbnailWidth | 生成缩略图的宽度 | Number | 110 | | 图片列表中每个图片缩略图的宽度 thumbnailHeight | 生成缩略图的高度 | Number | 110 | | 图片列表中每个图片缩略图的宽度 thumb详细说明 | 生成缩略图的规则 | Object| {width: 110,height: 110,quality: 70,allowMagnify: true,crop: true,type: ''}| 详细说明 | 图片上传时缩略图生成规则 hasPreview | 是否需要预览 | Boolean | false | true/false | 是否需要预览

文件上传配置

参数|说明|类型|默认值 | 可选值 | 描述 | --- | --- | --- | --- | --- | ---- | tip | 禁用时提示文字 | String | '' | 文件 | disabled为true buttonText | 按钮文字 | String | '' | 任何文字 | 上传按钮上的文字 hasList | 是否显示列表 | Boolean | true | false/true | 是否显示列表

props.accept

• accept.extensions

允许的文件后缀，不带点，多个用逗号分割。如'gif,jpg,jpeg,bmp,png'

• accept.mimeTypes

可选择的文件类型。

常用文件类型查询

props.compress

{
width: 1600,
height: 1600,

// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,

// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,

// 是否允许裁剪。
crop: false,

// 是否保留头部meta信息。
preserveHeaders: true,

// 如果发现压缩后文件大小比原来还大，则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,

// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 0
}

props.thumb

{
width: 110,
height: 110,

// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 70,

// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: true,

// 是否允许裁剪。
crop: true,

// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: ''
}

props.resultFilter

用于开发者干预响应报文的解析，告诉组件什么样的数据是正确的。 如:

function(res){
if (res.IsFinish) {
return {
status: true,
path: res.ReturnPath
};
}
return {
status: false,
msg: res.msg
};
}

该函数接收服务端的响应数据，并解析出一个结果对象，该结果对象包含：

• status 上传是否成功

• path 上传成功后服务器返回的路径

• msg 上传失败时服务器返回的错误信息

方法

upload

参数列表

无

返回值

undefined

refreshUploader

刷新图片上传组件，例如当图片组件在初始化时处于隐藏状态，那么显示时需要调用该方法进行刷新以保证组件功能

参数列表

无

返回值

undefined

resetUploader

重置图片上传组件

参数列表

无

返回值

undefined

cancelUpload

取消还未上传成功的图片

参数列表

无

返回值

undefined

isPending

组件是否处于上传状态，即其中有没有正在上传的图片

参数列表

无

返回值

类型: {Boolean}

说明:

1. true - 当前有正在上传的图片
2. false - 当前没有正在上传的图片

getUploadedFiles

获取组件中已成功上传的文件

参数列表

无

返回值

类型: {Array}

说明:

Array的每一项为一个file对象

getErrorFiles

获取组件中上传失败的文件

参数列表

无

返回值

类型: {Array}

说明:

Array的每一项为一个file对象

getPendingFiles

获取组件中正在上传的文件

参数列表

无

返回值

类型: {Array}

说明:

Array的每一项为一个file对象

getUrls

获取组件中上传成功的文件路径集合

参数列表

无

返回值

类型: {Array}

说明:

Array的每一项为一个图片在服务器上的路径

事件

事件名称 | 说明 | 回调参数 | 描述 --|--|--|-- runtime-success | 文件上传成功 | 请求的response对象 | 文件上传成功时触发该事件 runtime-error | 实时错误 | 信息对象Object | 实时错误信息发生变化时触发该事件 change-status | 状态变化 | 无 | 文件上传成功/失败（状态发生改变）时触发该事件 delete | 删除文件 | {index: Number(所在索引), url: String(文件地址), status: String(文件状态)} | 文件被删除时触发该事件

runtime-error参数详解

runtime-error的参数为一个信息对象，该对象包含两个属性，分别是code和msg；

code 错误码

该错误码有仅由以下几种值：

• Q_EXCEED_NUM_LIMIT // '文件数量超出限制!'
• Q_EXCEED_SIZE_LIMIT // '文件总大小超出限制!'
• Q_TYPE_DENIED // '文件类型不正确!'
• F_EXCEED_SIZE // '文件大小超出限制!'
• F_DUPLICATE // '文件重复!'
• HTTP_ERROR http错误, 此时msg为'http-状态码'形式 如http-404
• RESET 重置错误消息，即清空实时错误，表示实时错误已不能表示当前的状态，已被其他的操作清掉；

错误消息被重置有以下两种情况：

1. 图片上传成功；例如第一张图片上传失败，实时错误信息为非空，程序展示该信息，第二张图片上传成功，那么将给出'RESET',即实时错误信息为''，不用继续展示第一张图片的错误信息

2. 图片被删除; 当图片被删除时，因为整个列表发生了变化，此时也会触发runtime-error，并将code设置为'RESET'，因为整个列表被变化，意味着整个列表的状态发生了变化

msg 错误信息

以下为不同的code对应的提示信息:

• Q_EXCEED_NUM_LIMIT // '文件数量超出限制!'
• Q_EXCEED_SIZE_LIMIT // '文件总大小超出限制!'
• Q_TYPE_DENIED // '文件类型不正确!'
• F_EXCEED_SIZE // '文件大小超出限制!'
• F_DUPLICATE // '文件重复!'
• HTTP_ERROR // 'http-状态码' 如'http-404'
• RESET // ''

其他

file对象

一个file对象包含以下内容:

• status

• inited 初始状态
• queued 已经进入队列, 等待上传
• progress 上传中
• complete 上传完成并逻辑上成功
• error 上传出错，可重试
• interrupt 上传中断，可续传
• invalid 文件不合格，不能重试上传。会自动从队列中移除
• cancelled 文件被移除

• errorText

文件上传失败或上传成功但逻辑上失败时，保存失败信息

• previewStatus

预览图片的生成状态

• previewSrc

预览图片生成的image data。

注：但是如果是外部传入的图片列表，该值等于图片的真实路径(file.url)

• url

文件在服务器上的路径

• name

文件名称

更新日志

更新日志

外部资源依赖列表

• webuploader.html5only.js V0.1.6+