w-upload

@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	——

其他备注