Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@redbuck/image-uploader

0.1.21 • Public • Published

截图上传组件

简介

基于cropperjspreact的二次开发 包内已包含这两个组件,gzip后16k. umd格式,可<script>和import引入使用.

安装

js: npm i @redbuck/image-uploaderyarn add @redbuck/image-uploader

css: 位于@redbuck/image-uploader/lib/imageUploader.css

使用

const uploader = new ImageUploader(options)

options:

属性 类型 默认值 描述
width Number 100 截图框及输出尺寸
height Number 100 截图框及输出尺寸
MIME String 'image/png' 输出及上传返回图片格式
blob Boolean false crop派发blob
cropperOptions Object 见下方 cropperjs的配置
upload Function undefined 自定义上传回调(覆盖内置上传逻辑)
uploadUrl String '/' 上传路径
fileName String 'imgFile' 图片字段名
getFormData Function undefined 返回除了图片字段外,其余form字段的函数
getFormDataAsync Function undefined 异步的getFormData
el Element undefined 隐形file标签的挂载点
stop Boolean true 组件是否拦截事件,不冒泡(修复插入dom时,事件被拦截)
crop Boolean true 是否需要截图
multi Boolean false 是否开启批量传图,批量传图不能截图
responseFormat Function o=>o.data 格式化后端返回,批量传图时的预览会使用这个函数
deleteRequest Function undefined 批量上传中的删除接口,用于删除远程图片
description String '' 截图框的提示语
limit Number 2048000(b) 上传的体积限制
toast Function console.log 体积超出的提示方法
overSizeMessage Any 您选择的文件过大 体积超出的提示语,可以是对象.toast调用的参数

cropperOptions: (详见cropper官网)

{
    viewMode: 1,
    dragMode: 'move',
    center: false,
    zoomOnWheel: true,
    movable: true,
    resizable: true,
    autoCropArea: 1,
    minContainerWidth: '100%',
    background: true,
}

实例支持浏览器事件风格绑定回调.

uploader.on(event, callback)

支持的事件

事件 参数 描述
crop imageData 截图事件,截图完成,上传之前.blob或base64
error Error 打开截图框的错误
upload 后端response及getFormData的返回结果 上传成功事件.
upload-error 后端response 上传失败事件.
upload-start 开始上传之前.
upload-end 上传(成功/失败)之后.

multi-upload|最终留下的所有后端response|批量传图确定

上传行为

未配置upload方法时,crop之后将立即向配置项中的uploadUrl提交一个formData,携带图片转换成的blob,字段名为配置项中的fileName.如果还有其余字段,可以配置getFormData字段,返回一个对象,这个对象将被合并到表单中

如果需要完全自定义上传行为,可以配置upload方法,当配置该字段时,插件将忽略上述行为.改为调用该方法. 注入imageData和一个callback.callback用于继续派发uploadupload-error事件.因此,在自定义逻辑执行完之后,建议调用该callback,以保证组件的行为一致. callback为node的错误优先风格.以下为示例.

const uploader = new ImageUploader({
  upload: (img, callback) => {
    myUploadApi(img)
        .then(res => {
        // 调用callback,派发实例的upload事件
            callback(null, res)
        })
        .catch(err => {
            callback(err, null)
        })
  },
})

// 无论有没有配置upload,以下代码均无需修改
uploader.on('upload', res => {
    // do some thing
})

示例

直接载入图片
const bUploader = new ImageUploader({
  width: 300,
  height: 300,
})
 
// 指定需要截取的图片
 bUploader.showCropper('/static/1.jpg')
监听file的change事件
const uploader = new ImageUploader({
  width: 300,
  height: 300
})
 
// 监听file载入事件
$file.addEventListener('change', e => {
  uploader.uploadFile(e)
})
绑定元素

给options的el字段绑定一个dom即可,组件会将一个透明的file插入该元素.

const iUploader = new ImageUploader({
  width: 300,
  height: 300,
  el: document.getElementById('insert')
})

直接传图

配置crop字段为false即可

    const cUploader = new ImageUploader({
      blob: true,
      crop: false,
      uploadUrl: 'http://up-z2.qiniup.com/',
      el: $('#upload'),
      fileName: 'file',
      getFormData() {
        return {
          key: 'demo/' + Date.now() + '.png',
          token,
        }
      },
    })

批量传图

multi字段设置true,批量传图不支持截图,点击确定时,一次性返回上传结果,支持拖拽上传

    const dUploader = new ImageUploader({
      blob: true,
      uploadUrl: 'http://up-z2.qiniup.com/',
      el: $('#multiUpload'),
      fileName: 'file',
      multi: true,
      getFormData() {
        return {
          key: 'demo/' + Date.now() + '.png',
          token,
        }
      },
      // 删除已上传的图片
      deleteRequest(payload, callback) {
        API.delQiNiuItem(payload.response.data.key)
            .then(res => {
              console.log(res)
              // 调用callback,组件删除本地图片
              callback()
            })
            .catch(callback)
      },
    })
 
    dUploader.on('multi-upload', res => {
      console.log(res.complete)
    })

实例API

  1. showCropper 签名uploader.showCropper([imagePath]) 弹出一个截图框,imagePath为一个合法图片地址时,载入该图片,并初始化截图模块. 没有参数时,展示一个空的截图框,(截图框可以点击按钮载入图片.)
  2. uploadFile 签名uploader.uploadFile(fileChangeEvent, [isCrop]) 接受一个的change事件产生的event,一个是否需要截图的布尔值. 从event中获取一个imgFile,将其加入一个表单,向配置地址提交.如果配置中配置了其余表单项,会将其余部分加入.最终触发一系列事件.

Install

npm i @redbuck/image-uploader

DownloadsWeekly Downloads

20

Version

0.1.21

License

ISC

Unpacked Size

444 kB

Total Files

21

Last publish

Collaborators

  • avatar