ct-adc-img-uploader v1.3.1

ct-adc-img-uploader

图片上传组件；用于一个或多个图片文件的上传；

组件示例图

!img

在线demo

在线demo

功能点

1. 上传固定数量的图片
2. 设置可变的缩略图大小
3. 控制是否可以重复上传相同的一张图片

使用

从npm安装ct-adc-img-uploader

npm install ct-adc-img-uploader --save

在代码中使用

import ImgUploader from 'ct-adc-img-uploader';

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

//局部注册

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

props

props.resultFilter

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

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

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

• status 上传是否成功

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

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

方法

isPending

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

参数列表

无

返回值

类型: {Boolean}

说明:

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

getUploadedImgs

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

参数列表

无

返回值

类型: {Array}

说明:

Array的每一项为一个file对象

getErrorImgs

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

参数列表

无

返回值

类型: {Array}

说明:

Array的每一项为一个file对象

getPendingImgs

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

参数列表

无

返回值

类型: {Array}

说明:

Array的每一项为一个file对象

getUrls

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

参数列表

无

返回值

类型: {Array}

说明:

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

refreshUploader

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

参数列表

无

返回值

无

resetUploader

重置图片上传组件

参数列表

无

返回值

无

cancelUpload

取消还未上传成功的图片

参数列表

无

返回值

无

事件

runtime-success

事件名称 | 说明 | 回调参数 | 描述 runtime-success | 文件上传成功 | 无 | 文件上传成功时触发该事件 runtime-error | 实时错误 | 信息对象Object | 实时错误信息发生变化时触发该事件 change-status | 状态变化 | 无 | 文件上传成功/失败（状态发生改变）时触发该事件

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

图片在服务器上的路径

更新日志

更新日志

外部资源依赖列表

• webuploader.html5only.js V0.1.6+