# w-upload

> erhai 前端组件库

Latest version **2.0.6** (published 2022-10-19) · 0 weekly downloads

## Install

```sh
npm install w-upload
pnpm add w-upload
yarn add w-upload
bun add w-upload
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2022-10-19 |
| First published | 2022-10-18 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.9.1 |
| Dependencies | 0 |
| Unpacked size | 6.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fengye12 |

## Links

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

## Recent versions

- 2.0.6 (latest) — 2022-10-19
- 2.0.5 — 2022-10-19
- 2.0.4 — 2022-10-19
- 2.0.3 — 2022-10-19
- 2.0.2 — 2022-10-19
- 2.0.0 — 2022-10-18

## README

# `@weier/upload`

* Upload上传组件

```js
// 安装
npm i @weier/w-upload

// 代码引入
import wUpload from 'w-upload'
```

## 注意事项

> 1. 可以用v-model绑定value, 传入格式为 Array < Object > 类型
> 2. 回显字段为localUrl/remoteUrl， 分别为本地路径和服务端路径
> 3. value中的每一项有fileId，为文件id字段
> 4. 必须在登录状态下使用，否则会报403

<font color="red">需要对接的后端注册相应的business字段进行业务标识，联系伊塔（后端）</font>

## 基础用法

<!-- <w-upload unique-name="upload1">
</w-upload> -->

:::

```vue
<template>
<div style="margin: 12px;">普通上传</div>

<w-upload
  v-model="fileList"
  unique-name="upload1"
  envType="mock"
  ></w-upload>

</template>
<script>
export default {
  data(){
    return {
      fileList: []
    }}}
</script>
```

:::

## 其他用法

:::demo

```vue
<template>
<div style="margin: 12px;">不显示文件列表</div>
<w-upload
  v-model="fileList"
  unique-name="upload2"
  :envType="envType"
  :showFileList="false"
  :on-change="changeUpload"
  :on-success="successUpload"
  >
</w-upload>

<div style="margin: 12px;">自定义上传组件</div>
<w-upload v-model="fileList" :envType="envType" ref="customUpload">
<div class="custom-upload-area">自定义点击上传</div>
</w-upload>

<div style="margin: 12px;">普通图片上传</div>
<w-upload v-model="fileList2" uploadType="picture" accept='image/*' :envType="envType" ref="customUpload2" :limit="1">
</w-upload>

<div style="margin: 12px;">
<el-button @click="clearFiles">清除上传</el-button>
<el-button @click="uploadSelect">外部按钮触发</el-button>
<el-button @click="getAllUrls">获取所有链接</el-button>
</div>
</template>
<script>
export default {
  data(){
    return {
      fileList: [{name: '回显第一个文件', localUrl: ''}],
      fileList2: [],
      envType: 'mock'
    }
  },
  watch: {
    fileList (val, oldVal) {
      // console.log(val, oldVal)
    }
  },
  methods: {
    clearFiles(){
      this.$refs['customUpload'].clearFiles()
    },
    uploadSelect(){
      this.$refs['customUpload2'].execUpload()
    },
    getAllUrls() {
      const urlsPromise = this.$refs['customUpload2'].getAllUploadUrls()
      urlsPromise.then(res =>{
        // console.log(res)
      })
    },
    changeUpload(){
      console.log('change')
    },
    successUpload(){
      console.log('success')
    }
  },
  mounted(){
  }
}
</script>
<style>
.custom-upload-area {
  display: inline-block;
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #efefef;
  cursor: pointer;
}
</style>
```

:::

## Attributes

| 参数 | 说明 | 类型       | 可选值      |  默认值  | 备注 |
| ---- | ---- | --------- | ---------- | ------- | ------|
| business |  用于业务标识 |  string | —— | business | ——|
| headers |  用于自定义上传头 |  object | —— | {} | 自定义头部，默认可以不传 |
| httpRequest |  自定义上传方法 | object | —— | {} | —— |
| data |  用于自定义上传参数 |  object | —— | {} | —— |
| disabled |  是否禁用 |  boolean | —— | false |  |
| accept |  可接受的文件类型 |  string | —— | —— | 图片写死为'image/jpeg'，具体可传参数，请参照<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers" target="_blank">唯一文件类型说明符</a> |
| limit |  上传个数限制 |  number | —— | —— | —— |
| uploadType |  上传类型 |  string | file, picture | file | —— |
| uniqueName |  唯一标识 |  string | —— | unique | 多个upload出现的话，绑定的key值 |
| isAutoFillUrl |  上传完成后是否自动填补url |  boolean | —— | true | —— |
| envType |  开发环境 |  string | ['mock', 'dev', 'qa','pre','prod'] | dev | —— |
| showFileList |  是否显示文件列表 |  boolean | —— | true | —— |

## prop类型的钩子

> 用法： 
> 1. template v-bind:beforeUpload="handleBeforeUpload"
> 2. jsx <Parent ...{props: {'before-upload': handleBeforeUpload}} />

| 属性名 | 说明 | 参数  | 可选值      |  默认值  | 备注 |
| ---- | ---- | --------- | ---------- | ------- | ------|
| beforeUpload |  文件上传前触发 |  rawFile| —— | —— | 返回false或者Promise并且reject, Promise.reject, 则不会继续上传，并且触发onError |

## emit风格的钩子， 参数与prop钩子一致

> 用法： 
> 1. template写法：@change="handleChange"
> 2. jsx写法：onChange={handleChange}
> 原理为emit('动作', 参数列表)
> 父接收参数为args[]

| 事件名 | 说明 | 参数  | 可选值      |  默认值  | 备注 |
| ---- | ---- | --------- | ---------- | ------- | ------|
| change |  任何文件改变都会触发 |  target, uploadList | —— | —— | ——|
| success |  上传文件成功之后触发 |  res, target, uploadList | —— | —— | ——|
| progress |  文件上传过程中触发 |  ev(progress对象，percentage为百分比), target, uploadList | —— | —— | ——|
| error |  文件上传失败触发 | error, target, uploadList | —— | —— | ——|
| exceed |  超过文件上传数量大小调用 |  target, uploadList | —— | —— | ——|
| remove |  移除文件触发 |  index(移除文件在列表里的位置) | —— | —— | ——|

## Methods

| 方法名 | 说明 | 参数    |
| ---- | ---- | --------- | 
| abort |  终止文件上传，参数为空则停止全部上传 | file  | 
| execUpload |  外部事件可以触发上传（必须要用户事件，定时器之类的非用户行为无效） | ——  | 
| getAllUploadUrls |  一次性获取已经上传完成的文件的url，返回promise，resolve参数为res | ——  | 
| getUrlsByIds |  通过外部传入ids，获取urls，返回promise，resolve参数为res | ——  |

## 其他备注

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