Vue 项目中实现阿里云 oss 分片上传功能

npm install ali-oss

<template>
    <div class="big-file-box">
        <div class="big-file" :style="{width: width + 'px', height: height + 'px'}">
            <input type="file" :accept="accept" ref="file" style="opacity: 0;" class="file-input" @change="handleFileChange">
            <el-button type="primary">{{btnText}}</el-button>
        </div>
        <div v-if="isError" style="color: red;">上传中断，请点击进度条后面的按钮【继续上传】</div>
        <div v-if="isUploading && !isFinished && !isError" style="color: #666;">正在上传，请等待…</div>
        <div style="display: flex; align-items: center; gap:5px;">
            <el-progress :percentage="progress" v-if="isUploading && !isFinished" style="flex: 1;"></el-progress>
            <el-button type="text" @click="resumeUpload" v-if="abortCheckpoint && isError">继续上传</el-button>
        </div>
    </div>
</template>

<script>
import OSS from 'ali-oss'
export default {
    name: "BigFileUpload",
    props: {
        btnText: {
            type: String,
            default: "点击上传文件"
        },
        width: {
            type: Number,
            default: 180
        },
        height: {
            type: Number,
            default: 38
        },
        accept: {
            type: String,
            default: "*"
        }
    },
    data() {
        return {
            file: null,
            progress: 0,
            isUploading: false, // 是否正在上传
            isError: false, // 是否上传错误
            isFinished: false, // 是否上传完成
            abortCheckpoint: null,
            client: null,
        }
    },
    mounted() {
        this.getSign()
    },
    methods: {
        // 请求后端接口获取阿里云 oss 临时凭证 STS Token
        getSign() {
            $request.api('common/get_sts_token', {}, (status, data, msg) => {
                if (status != 1) {
                    this.$alert(msg)
                    return
                }
                this.initOssClient(data)
            })
        },

        // 初始化oss客户端
        initOssClient(sign) {
            this.client = new OSS({
                region: 'oss-cn-hangzhou', // 这里填写你的 oss 区域，我们服务器位于杭州，所以填的杭州
                authorizationV4: true,
                accessKeyId: sign.AccessKeyId,
                accessKeySecret: sign.AccessKeySecret,
                stsToken: sign.SecurityToken,
                bucket: '这里填写后端创建的 bucket 的名称'
            })
        },

        async uploadFile(checkpoint) {
            if (!this.file) {
                this.$alert("请选择文件")
                return
            }

            this.isUploading = true
            try {
                const suffix = this.getFileSuffix(this.file.name)
                const result = await this.client.multipartUpload(
                    'big-file/' + Date.now() + '.' + suffix, // 将文件以时间戳命名，避免重复。 big-file 是文件存放的层级。（注意： oss 是没有文件夹概念的）
                    this.file,
                    {
                        checkpoint: checkpoint,
                        progress: (p, cpt, res) => {
                            this.abortCheckpoint = cpt // 将断点信息保存下来，用于后续的断点续传
                            this.progress = Math.round(p * 100) // 进度条显示百分比
                        },
                        mime: "text/plain",
                        parallel: 4, // 设置并发上传的分片数量。
                        partSize: 1024 * 1024 * 1, // 设置每个分片的大小，默认值是 1MB
                    }
                )

                // 上传成功后清理状态
                this.abortCheckpoint = null;
                this.progress = 0;
                this.isError = false

                // 进度条延迟1秒后消失
                setTimeout(() => { this.isUploading = false;this.isFinished = true }, 1000)

                // 上传成功，将结果回传给父组件
                this.$emit('success', result.res)
            } catch(e) {
                if (e.code === 'SecurityTokenExpired' || e.code === 'InvalidSecurityToken') {
                    this.getSign()
                }
                this.isError = true // 上传错误
                this.isFinished = false
                console.log(e.message)
            }
        },

        // 获取文件后缀
        getFileSuffix (fileName) {
            return fileName.split('.').pop()
        },

        async handleFileChange(e) {
            this.file = e.target.files[0]
            
            // 选择新文件后，重置所有状态
            this.abortCheckpoint = null;
            this.progress = 0;
            this.isUploading = false
            this.isFinished = false
            this.isError = false

            this.uploadFile(null)
        },

        // 断点续传
        resumeUpload() {
            if (this.abortCheckpoint) {
                this.isError = false
                this.isFinished = false
                this.isUploading = true
                this.uploadFile(this.abortCheckpoint)
            } else {
                this.$toast('没有可用的断点信息，请重新开始上传')
            }
        },
    }
}
</script>

<style lang="less" scoped>
.big-file {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    min-width: 100px;
    .file-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}
</style>

<template>
    <div>
        <BigFileUpload btnText="点击上传案例视频（mp4格式）" :width="200" accept=".mp4" @success="handleSuccessVideo" />
    </div>
</template>

<script>
import BigFileUpload from './big-file-upload.vue'
export default {
    components: {
        BigFileUpload
    },
    data() {
        return {
            video_list: []
        }
    },
    methods: {
        handleSuccessVideo(result) {
            const url = new URL(result.requestUrls[0]);
            this.video_list.push(url.pathname)
        },
    }
}
</script>