@redbuck/image-uploader v0.1.21

截图上传组件

简介

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

安装

js: npm i @redbuck/image-uploader或yarn add @redbuck/image-uploader

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

使用

const uploader = new ImageUploader(options)

options:

cropperOptions: (详见cropper官网)

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

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

uploader.on(event, callback)

支持的事件

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

上传行为

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

如果需要完全自定义上传行为,可以配置upload方法,当配置该字段时,插件将忽略上述行为.改为调用该方法. 注入imageData和一个callback.callback用于继续派发upload或upload-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,将其加入一个表单,向配置地址提交.如果配置中配置了其余表单项,会将其余部分加入.最终触发一系列事件.