obitUpload 文件上传

# 文件上传 obit-upload

代码实现

<template>
  <div class="upload">
    <obitUpload :action="action" :multiple="false" :params="uploadParams" :size="5" :success="success" accept="jpg, png, jpeg">
      <img :src="formData.imageUrl" class="avatar" height="200" v-if="formData.imageUrl" width="300" />
      <i class="el-icon-plus avatar-uploader-icon" v-else></i>
    </obitUpload>
  </div>
</template>

<script>
import obitUpload from './../../../src/obit-upload/obit-upload'

export default {
  components: {
    obitUpload
  },
  data() {
    return {
      formData: {
        imageUrl: ''
      },
      uploadParams: {
        uploadType: 3
      },
      action: 'http://rap2.taobao.org:38080/app/mock/228700/upload'
    }
  },
  methods: {
    success(res) {
      this.formData.imageUrl = res.sourceUrl
    }
  }
}
</script>

# 参数说明

参数	说明	类型	可选值	默认值	是否必填
drag	是否允许拖拽上传	Boolean	-	false	-
action	上传文件地址必填	String	-	-	true
accept	上传的文件类型限制比如 jpg,png	String	-	-	-
success	成功回调	Function	-	-	-
multiple	是否允许多文件上传	Boolean	-	true	-
size	是否允许多文件上传	Boolean	-	true	-
multiple	单个文件大小最大限制（M）	Number	-	10	-
limit	允许同时最多上传文件数量	Number	-	10	-
params	自定义参数具体如下	Object	-	-	-
autoUpload	是否选择完文件自动上传具体操作如下	Boolean	-	true	-

# params

自定义参数

<script>
    //最终参数会在默认参数{ uploadType: 2 }，继承自定义参数params
    Object.assign({ uploadType: 2 }, this.params)
</script>

# autoUpload

手动触发上传

<template>
    <obitUpload
      :autoUpload="false"
      :params="uploadParams"
      :size="1"
      :success="success"
      accept="jpg, png, jpeg"
      action="fileserve/file/uploadFile"
      ref="upload"
    >
      <el-button size="small" type="primary">主动触发</el-button>
    </obitUpload>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        imageUrl: ''
      },
      uploadParams: {
        uploadType: 3
      },
      action: 'http://rap2.taobao.org:38080/app/mock/228700/upload'
    }
  },
  methods: {
    //通过其他的事件触发上传
    submitUpload() {
      this.$refs.upload.submit()
    }
  }
}
</script>