基於七牛和 element-ui 的 vue 檔案上傳元件

Mcbai發表於2018-12-08
UIVue元件

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

相關文章