基於七牛和 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() 再寫一次。