# vue-upload-drag

> A Drag upload component project

Latest version **1.5.0** (published 2019-12-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-upload-drag
pnpm add vue-upload-drag
yarn add vue-upload-drag
bun add vue-upload-drag
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2019-12-03 |
| First published | 2019-11-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Maple |
| Maintainers | maple_hu |
| Keywords | vue-upload-drag, vue_upload_drag, vue, upload, vue-dragging, vue-drag, vue-dnd, drag, drop, html5 |

## Links

- npm: https://www.npmjs.com/package/vue-upload-drag
- npm.io page: https://npm.io/package/vue-upload-drag

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.5.0 (latest) — 2019-12-03
- 1.4.9 — 2019-12-03
- 1.4.8 — 2019-12-03
- 1.4.7 — 2019-12-03
- 1.4.6 — 2019-12-03
- 1.4.5 — 2019-12-03
- 1.4.4 — 2019-12-03
- 1.4.3 — 2019-12-03
- 1.4.2 — 2019-12-03
- 1.4.1 — 2019-12-03
- 1.4.0 — 2019-12-03
- 1.3.8 — 2019-12-03
- 1.3.7 — 2019-12-03
- 1.3.6 — 2019-12-03
- 1.3.5 — 2019-12-03
- … 32 more at https://npm.io/package/vue-upload-drag/versions

## README

# Requirements

- Vue: ^1.0.0 or ^2.0.0
- 支持图片上传，图片拖拽，自定义图片上传

## Install

From npm:

``` sh

$ npm install vue-upload-drag -D

```

### Usage

``` javascript

import VueUploadDrag from 'vue-upload-drag'
Vue.use(VueUploadDrag)
```

``` html
<!--your.vue-->
<template>
  <upload-drag v-model="fileList" :config="config"/>
</template>
```

#### API
* `{onChange} Function`
* `{onProgress} Function`
* `{onError} Function`
* `{onSuccess} Function 必须接受，并回调exChangeUrl方法`

##### slot
* `具名插槽：loading，用于自定义loading，结合config.loading用`
* `具名插槽：imgBtns，用于自定义imgBtns，结合config.imgBtns用`
* `具名插槽：liItem，该插槽是在li元素根节点`

###### Arguments:
 * `{config} Object`
 ``` javascript
 export default {
  name: 'uploadDrag',
  props: {
    value: {
      required: true,
      type: Array
    },
    config: {
      required: false,
      type: Object,
      default: _ => ({
        accept: "image/*", // 文件上传类型
        action: "https://jsonplaceholder.typicode.com/posts/", // 上传域名
        data: {}, // 请求参数
        limit: 9, // 支持最大上传文件数
        multiple: true, // 支持多个文件选择
        imgUrl: "url", // 图片路径字段
        deleteBtnName: "删除", // 删除按钮名
        viewBtnName: "查看", // 查看按钮名
        dragabled: true, // 是否拖拽
        imgBtns: ["删除", "查看"], // 图片按钮显示集合，另可以通过具名插槽名imgBtns自定义
        loading: true, // 图片加载loading是否开启，另可以通过具名插槽名Loading自定义
        isHttpRequest: false, // 是否自定义请求
        uploadField: "file", // 上传默认字段
      })
    }
  }
 }
```

###### Example

``` html
<template>
  <upload-drag v-model="fileList" :config="config" @onChange="onChange" @onProgress="onProgress" @picsExceed="picsExceed" @onError="onError" @onSuccess="onSuccess"/>
</template>
```

``` javascript
import VueUploadDrag from 'vue-upload-drag'
Vue.use(VueUploadDrag)

export default {
  data() {
    return {
      fileList: [
        {
          name: "food.jpg",
          url: "https://www.baidu.com/img/bd_logo1.png",
          id: 11
        }
      ],
      config: {
          limit: 1
      }
    };
  },
  methods: {
      onChange (f) { // 图片选择改变，且config中isHttpRequest为true
          console.log(f)
      },
      onProgress ({ e, file, uid }) { // 上传中
          console.log(e, file, uid)
      },
      onError ({ err, file, uid }) { // 上传失败,会自动把图片移除，建议给提示
          alert('图片上传失败')
          console.log(err, file, uid)
      },
      picsExceed ({uploadBefore, selectCount, files, value}) { // 同时选择多张图片超过限制数会被触发
          alert('选择的图片数量超过最大数')
          uploadBefore(files, value) // 过滤多余的图片继续上传
      },
      onSuccess ({res, file, _uid , exChangeUrl, handleRemove}) { // 上传成功，请必须接受onSuccess方法
          console.log(res, file, _uid , exChangeUrl, handleRemove)
          // 仅是举例而已哦
          if (res.code === '0') { // 根据后端状态判断
            const {url} = res.data
            exChangeUrl(_uid, url); // url为后端返回的图片链接值，uid是onSuccess传入的
          } else {
            alert('图片上传失败')
            handleRemove(_uid) // 删除图片
          }
      }
  }
};
```

---
_Source: https://npm.io/package/vue-upload-drag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._