Upload 组件

1.3.0 新增

Upload 上传组件。

注： 本文中所有的原始文件对象统称为原始文件，而经过包装后的文件对象称为文件对象，这个文件对象的结构如下：

示例

基本用法

<cube-upload action="//jsonplaceholder.typicode.com/photos/" :simultaneous-uploads="1" @files-added="filesAdded">

export default {
  methods: {
    filesAdded(files) {
      let hasIgnore = false
      const maxSize = 1 * 1024 * 1024 // 1M
      for (let k in files) {
        const file = files[k]
        if (file.size > maxSize) {
          file.ignore = true
          hasIgnore = true
        }
      }
      hasIgnore && this.- createToast({
        type: 'warn',
        time: 1000,
        txt: 'You selected >1M files'
      }).show()
    }
  }
}

配置 action 表示上传的 URL 地址，而 simultaneous-uploads 则表示支持的并发上传个数。

通过 files-added 事件可以实现文件过滤，设置 file.ignore = true 即可。

压缩图片且通过 Base64 上传

<cube-upload ref="upload" :action="action" :simultaneous-uploads="1" :process-file="processFile" @file-submitted="fileSubmitted">

import compress from '../../modules/image'
export default {
  data() {
    return {
      action: {
        target: '//jsonplaceholder.typicode.com/photos/',
        prop: 'base64Value'
      }
    }
  },
  methods: {
    processFile(file, next) {
      compress(file, {
        compress: {
          width: 1600,
          height: 1600,
          quality: 0.5
        }
      }, next)
    },
    fileSubmitted(file) {
      file.base64Value = file.file.base64
    }
  }
}

action 中除了有 target 目标上传地址外；还有 prop 配置，表示上传的时候采用处理后的 file 普通对象的哪个属性所对应的值上传，这里设置的就是 base64Value 的值。

process-file 则是一个函数，主要用于处理原生文件的，调用 next 回调的话，参数是处理完的文件对象，这里示例的就是调用 compress 做压缩，处理完后会回调 next。

file-submitted 事件则是每个文件处理完后添加到 upload 实例的 files 数组中后触发，参数就是一个处理后的文件对象。

自定义结构样式

使用默认插槽来实现自定义结构，在此基础上自定义样式。

<cube-upload ref="upload" v-model="files" :action="action" @files-added="addedHandler" @file-error="errHandler">
  <div class="clear-fix">
    <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
    <cube-upload-btn :multiple="false">
      <div>
        <i>＋</i>
        <p>Please click to upload ID card</p>
      </div>
    </cube-upload-btn>
  </div>
</cube-upload>

export default {
  data() {
    return {
      action: '//jsonplaceholder.typicode.com/photos/',
      files: []
    }
  },
  methods: {
    addedHandler() {
      const file = this.files[0]
      file && this.- refs.upload.removeFile(file)
    },
    errHandler(file) {
      // const msg = file.response.message
      this.- createToast({
        type: 'warn',
        txt: 'Upload fail',
        time: 1000
      }).show()
    }
  }
}

样式覆盖：

.cube-upload
  .cube-upload-file, .cube-upload-btn
    margin: 0
    height: 200px
  .cube-upload-file
    margin: 0
    + .cube-upload-btn
      margin-top: -200px
      opacity: 0
  .cube-upload-file-def
    width: 100%
    height: 100%
    .cubeic-wrong
      display: none
  .cube-upload-btn
    display: flex
    align-items: center
    justify-content: center
    > div
      text-align: center
    i
      display: inline-flex
      align-items: center
      justify-content: center
      width: 50px
      height: 50px
      margin-bottom: 20px
      font-size: 32px
      line-height: 1
      font-style: normal
      color: #fff
      background-color: #333
      border-radius: 50%

上述示例实现的效果就是点击上传（一次只能选择一张）一张图片，此图片就会直接展示，而上传按钮本身则是不可见，覆盖在图片预览区域上。再次重新选择图片，就会移除掉上次选择的图片，重新展示新选择的图片。

Props 配置

action 子配置项

如果 action 是字符串，则会被处理成 { target: action } 这样结构。

processFile 子配置项

一个函数，这个函数有两个参数：(file, next)，file 就是原始文件，next 为处理完毕后的回调函数，调用的时候需要传入处理后的文件。

事件

实例方法

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/upload