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

原文地址：基于七牛和 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>
复制代码