@redbuck/image-uploader

截图上传组件

简介

基于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:

属性	类型	默认值	描述
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用于继续派发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

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