@weier/upload

• Upload上传组件

// 安装
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

需要对接的后端注册相应的business字段进行业务标识，联系伊塔（后端）

基础用法

:::

<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

<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'，具体可传参数，请参照唯一文件类型说明符 | | 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 | —— |

其他备注