# @redbuck/image-uploader

> crop image and upload

Latest version **0.1.21** (published 2019-12-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @redbuck/image-uploader
pnpm add @redbuck/image-uploader
yarn add @redbuck/image-uploader
bun add @redbuck/image-uploader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.21 |
| Published | 2019-12-24 |
| First published | 2019-02-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 433.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | TY-xie |
| Maintainers | redbuck |
| Keywords | crop, image, upload |

## Links

- npm: https://www.npmjs.com/package/@redbuck/image-uploader
- Repository: https://github.com/xty1992a/imageUploader
- Homepage: https://github.com/xty1992a/imageUploader#readme
- Issues: https://github.com/xty1992a/imageUploader/issues
- npm.io page: https://npm.io/package/@redbuck/image-uploader

## Dependencies (2)

- [preact](https://npm.io/package/preact.md) ^8.4.2
- [cropperjs](https://npm.io/package/cropperjs.md) ^1.4.3

## Recent versions

- 0.1.21 (latest) — 2019-12-24
- 0.1.20 — 2019-11-21
- 0.1.19 — 2019-11-21
- 0.1.18 — 2019-07-11
- 0.1.17 — 2019-07-11
- 0.1.16 — 2019-07-08
- 0.1.15 — 2019-05-06
- 0.1.14 — 2019-04-30
- 0.1.13 — 2019-04-30
- 0.1.12 — 2019-04-29
- 0.1.11 — 2019-04-27
- 0.1.10 — 2019-04-27
- 0.1.9 — 2019-04-27
- 0.1.8 — 2019-04-26
- 0.1.7 — 2019-04-26
- … 15 more at https://npm.io/package/@redbuck/image-uploader/versions

## README

### 截图上传组件

#### 简介
基于[cropperjs](https://github.com/fengyuanchen/cropperjs)和[preact](https://preactjs.com/)的二次开发
包内已包含这两个组件,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官网](https://fengyuanchen.github.io/cropperjs/))
```javascript
{
    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
})
```

#### 示例
##### 直接载入图片
```javascript
const bUploader = new ImageUploader({
  width: 300,
  height: 300,
})

// 指定需要截取的图片
 bUploader.showCropper('/static/1.jpg')
```

##### 监听file的change事件
```javascript
const uploader = new ImageUploader({
  width: 300,
  height: 300
})

// 监听file载入事件
$file.addEventListener('change', e => {
  uploader.uploadFile(e)
})
```

##### 绑定元素
给options的el字段绑定一个dom即可,组件会将一个透明的file插入该元素.
```javascript
const iUploader = new ImageUploader({
  width: 300,
  height: 300,
  el: document.getElementById('insert')
})
```

#### 直接传图
配置crop字段为false即可
```javascript
	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,批量传图不支持截图,点击确定时,一次性返回上传结果,支持拖拽上传
```javascript
	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])`
接受一个<input type="file">的change事件产生的event,一个是否需要截图的布尔值.
从event中获取一个imgFile,将其加入一个表单,向配置地址提交.如果配置中配置了其余表单项,会将其余部分加入.最终触发一系列事件.

---
_Source: https://npm.io/package/@redbuck/image-uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._