vue ali-oss 视频上传封装组件

最新推荐文章于 2025-06-20 16:10:16 发布

微微暖风

最新推荐文章于 2025-06-20 16:10:16 发布

阅读量4.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 相关知识

本文链接：https://blog.youkuaiyun.com/cxz792116/article/details/96906166

本文介绍了如何在Vue项目中使用ali-oss库进行视频上传，包括阿里云账号注册、Bucket创建及设置、accessKey管理、Vue项目初始化以及单文件和多文件上传的简易示例代码。特别提到，为了优化样式，采用了原生input[type=file]并提供了样式调整建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注册阿里云oss 账号地址（https://www.aliyun.com/）
创建Bucket

3.设置Bucket （允许跨域）
在这里插入图片描述

4. 生产accessKeyId 和 accessKeySecret

5. 创建vue项目，并安装ali-oss

npm install ali-oss  --save  或者 cnpm install ali-oss  --save

6.单文件上传简易示例代码如下：

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action=""
      :http-request="beginUpload"
      :show-file-list="false">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-progress :percentage="Number(percentage.toFixed(2))"></el-progress>
    <el-button @click="pauseUpload">暂停</el-button>
    <el-button @click="goonUpload">继续</el-button>
  </div>
</template>

<script>
import OSS from 'ali-oss'
export default {
  components: {},
  data () {
    return {
      imageUrl: '',
      percentage: 0,
      checkpoint: null,
      client: null,
      filename: ''
    }
  },
  computed: {
  },
  created () {
    this.client = new OSS({
      region: 'oss-cn-hangzhou',
      accessKeyId: '<Your AccessKeyId>',
      accessKeySecret: '<Your AccessKeySecret>',
      bucket: 'Your bucket name',
      secure: false
    })
  },
  methods: {
    async ossUpload (filename, file) {
      let _this = this
      try {
        let r