upload上传API文档

wb-upload参数:

参数说明类型可选默认必填
action自动上传必选参数,上传的地址String--
autoUpload是否自动上传booleantrue/falsefalse
data上传时附带的额外参数object--
listType上传样式类型Stringhead,text/picture/picture-card-
showFileList是否显示上传列表(上传头像,必须false)booleantrue/falsefalse
drag是否使用拖拽 (text/pictures 模式使用)String--
limit最大允许上传个数number--
isIcon是否开启icon模式 (仅限picture)booleantrue/falsefalse
tip元素最底部添加的提示语String--
fileList回显数据列表array--
fileType设置上传的文件类型array--
fileSize设置上传的文件大小(KB形式结算)number--
styleOptions上传框样式控制 (只限上传头像使用,其他的请用样式控制)object--
  • kb算法:1KB=1024B 1MB(M)=1024KB 1GB=1024MB;

  • event事件

参数说明回调参数
success文件上传成功时的钩子(手动上传,触发change事件就会回调)value
error文件上传失败时的钩子value
remove文件列表移除文件时的钩子value

常见问题:

  • 暂无(欢迎!反馈)

使用组件案例:

<template>
  <div>
    <wb-upload
      :action="uploadInfo.action"
      :autoUpload="uploadInfo.autoUpload"
      :listType="uploadInfo.listType"
      :showFileList="uploadInfo.showFileList"
      :styleOptions="uploadInfo.styleOptions"
      :fileType="uploadInfo.fileType"
      :fileSize="uploadInfo.fileSize"
      :tip="uploadInfo.tip"
      :fileList="uploadInfo.fileList"
      :drag="uploadInfo.drag"
      :limit="uploadInfo.limit"
      :isIcon="uploadInfo.isIcon"
      @success="uploadSuccessFn"
      @error="uploadErrorFn"
      @remove="uploadRemoveFn"
    >
    </wb-upload>
  </div>
</template>

<script>
  export default {
    name: 'wb-ceshiupload',
    data () {
      return {
        uploadInfo: {
          action: 'https://jsonplaceholder.typicode.com/posts/',   // 上传地址 (自动上传时,必填)
          autoUpload: false, // 是否自动上传 (默认false)
          listType: 'picture', // 文件列表的类型
          showFileList: true,  // 是否显示上传列表(上传头像,必须false)
          tip: '只能上传jpg/png文件,且不超过500kb', // 提示语
          drag: false,   // 是否使用拖拽  (text/pictures 模式使用)
          fileList: [],   // 回显数据列表
          limit: 100, // 最大允许上传个数
          isIcon: true,   // 是否开启icon模式 (仅限picture)
          // 上传框样式控制   (只限上传头像使用,其他的请用样式控制)
          styleOptions: {
            width: '100px',
            height: '100px',
            lineHeight: '100px',
          },
          fileType: ['jpg','png'],    // 设置上传的文件类型
          fileSize: 500    // 设置上传的文件大小(以KB结算)
        }
      }
    },
    methods: {
      // 上传成功
      uploadSuccessFn (res) {
        console.log(res)
      },
      // 上传失败
      uploadErrorFn (err) {
        console.log(err)
      },
      // 删除回调
      uploadRemoveFn (res) {
        console.log(res)
      },
    }
  }
</script>

<style scoped>
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值