基于七牛和 element-ui 的 vue 文件上传组件

原文地址：基于七牛和 element-ui 的 vue 文件上传组件

将图片之类的文件资源存在七牛须要使用七牛的 JS SDK，项目基于 Vue2.x，使用的 Element-UI，因此但愿能直接使用 ElementUi 自带的上传组件，而不是再基于七牛的 SDK 彻底从新封装一个。

七牛的文档写的真的不怎么样，虽然实际要写的代码很简单，但你直接看文档，看完一遍都不知道他写的什么。

Element-UI 的上传组件支持覆盖默认的上传行为，能够自定义上传的实现，可是 httpRequest 这个函数所接受的参数并无在文档里写明，须要本身去看源码。

这里统一写一个简单的组件示例，你们结合这个组件，再去看七牛文档，就能很轻松理解了，只须要根据本身的需求往组件里加东西就行。

<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>
复制代码

这里有个小技巧，就是 inheritAttrs: false 结合 $attrs 的使用，以此来保证咱们基于 Element-UI 再次封装的组件能够直接使用 Element 组件提供的属性和方法，而不须要每一个都经过 props 属性或者 $emit() 再写一次。