<template>
 <div class="c-upload-root">
 <el-upload
 action=""
 :multiple="true"
 :http-request="uploadFile"
 v-bind="$attrs">
 <slot></slot>
 <div class="el-upload__tip" slot="tip">
 <slot name="tip"></slot>
 </div>
 </el-upload>
 </div>
</template>
<script>
/**
 * 在其它地方调用该组件时,
 * 可以直接使用 el-upload 组件所提供的所有属性和方法,
 * 只有 action 和 http-request 两个属性无法修改
 */
import * as qiniu from 'qiniu-js'
export default {
 name: 'qn-ele-upload',
 inheritAttrs: false,
 data() {
 return {
 }
 },
 props: {
 // 上传凭证
 // 七牛JavaScript SDK API: qiniu.upload(file: blob, key: string, token: string, putExtra: object, config: object) 里的 token
 // 具体参数查看 https://developer.qiniu.com/kodo/manual/1208/upload-token
 qnToken: {
 type: String,
 default: null
 },
 // 七牛JavaScript SDK API: qiniu.upload(file: blob, key: string, token: string, putExtra: object, config: object) 里的 config
 // 具体参数查看 https://developer.qiniu.com/kodo/sdk/1283/javascript#3
 qnConfig: {
 type: Object,
 default() {
 return {
 useCdnDomain: true,
 disableStatisticsReport: false,
 retryCount: 6,
 region: qiniu.region.z2
 }
 }
 },
 // 七牛JavaScript SDK API: qiniu.upload(file: blob, key: string, token: string, putExtra: object, config: object) 里的 putExtra
 // 具体参数查看 https://developer.qiniu.com/kodo/sdk/1283/javascript#3
 qnPutextra: {
 type: Object,
 default() {
 return {
 fname: '',
 params: {},
 mimeType: null
 }
 }
 }
 },
 methods: {
 /**
 * 文件上传方法,使用 七牛SDK 进行上传,覆盖 el-upload 的默认上传方法
 * @param {Object} option - 包含下列属性:
 * {
 * headers: 使用 el-upload 组件提供的 headers 属性
 * withCredentials: 使用 el-upload 组件提供的 headers 属性
 * file: 添加到浏览器的 file 对象
 * data: 使用 el-upload 组件提供的 data 属性
 * filename: 使用 el-upload 组件提供的 name 属性
 * action: 使用 el-upload 组件提供的 action 属性
 * onProgress: 使用 el-upload 组件提供的 onProgress 属性
 * onSuccess: 使用 el-upload 组件提供的 onSuccess 属性
 * onError: 使用 el-upload 组件提供的 onError 属性
 * }
 */
 uploadFile(option) {
 const fileName = this.changeFileName(option.file.name)
 
 const observable = qiniu.upload(
 option.file,
 fileName,
 this.qnToken,
 this.qnPutextra,
 this.qnConfig
 )
 observable.subscribe({
 next: option.onProgress,
 error: option.onError,
 complete: option.onSuccess
 })
 },
 // 修改原文件名,给文件名添加一个时间戳
 changeFileName(filename) {
 return filename.replace(/.[a-zA-Z0-9]+$/, (match) => {
 return `-${Date.now()}${match}`
 })
 }
 }
}
</script>