VUE-阿里云OSS上传组件

最新推荐文章于 2026-05-23 14:16:15 发布

原创

最新推荐文章于 2026-05-23 14:16:15 发布 · 2.2k 阅读

标签

#vue.js #阿里云 #elementui

本文档介绍了如何使用封装的阿里云OSS组件进行图片和视频上传，提供了组件代码示例，涵盖了配置、参数详解和常见操作，适合前端开发者快速集成云存储功能。

根据项目需求封装的一个阿里云OSS上传组件，可进行图片上传和视频上传。

上组件代码：

<template>
  <div>
    <div v-if="uploadType == 'image'">
      <el-upload
        class="avatar-uploader"
        :style="{ width: imgWidth + 'px', height: imgHeight + 'px' }"
        action=""
        :show-file-list="false"
        :auto-upload="false"
        :on-change="(file) => uploadImageOrVideo(file)"
      >
        <img
          v-if="showUrl"
          :src="OSSUrl(showUrl)"
          class="avatar"
          :style="{ width: imgWidth + 'px', height: imgHeight + 'px' }"
        />
        <i
          v-else
          class="el-icon-plus avatar-uploader-icon"
          :style="{
            width: imgWidth + 'px',
            height: imgHeight + 'px',
            'line-height': imgHeight + 'px',
          }"
        ></i>
      </el-upload>
    </div>
    <div v-if="uploadType == 'video'" class="video-main">
      <el-upload
        v-show="!uploadProgress"
        style="display: inline-block"
        action=""
        :multiple="false"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="(file) => uploadImageOrVideo(file)"
      >
        <el-button
          style="margin-left: 10px"
          type="normal"
          size="small"
          @click="uploadBefore"
          >选择视频</el-button
        >
      </el-upload>

      <el-button
        v-if="!showProgress && uploadProgress"
        style="margin-left: 10px"
        type="normal"
        size="small"
        >视频上传中...</el-button
      >
      <div style="width: 150px" v-if="uploadProgress && showProgress">
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="uploadProgress"
        ></el-progress>
      </div>
      <el-button
        v-if="uploadProgress && cancelUpload"
        style="margin-left: 10px"
        type="normal"
        size="small"
        @click="stopUpload"
        >取消上传</el-button
      >
      <el-button
        v-show="showUrl && !uploadProgress && videoPreview"
        style="margin-left: 10px"
        type="normal"
        size="small"
        @click="dialogVisible = true"
        >视频预览</el-button
      >
    </div>
    <el-dialog title="视频预览" :visible.sync="dialogVisible" width="650px">
      <video
        controls
        :src="OSSUrl(showUrl)"
        style="width: 600px; height: 400px"
      />
    </el-dialog>
  </div>
</template>
<script>
// 下载oss模块后，引入使用
import OSS from 'ali-oss'
let clientArr = []
export default {
  props: {
    uploadType: {//上传的类型：image-图片(默认)，video-视频
      type: String,
      default: 'image'
    },
    showFileUrl: {//要显示的image/video在阿里云服务器上的地址
      type: String,
      default: ''
    },
    configureOSS: {//创建OSS实例所需的配置项： 示例：{region:'oss-cn-shenzhen',accessKeyId:'xxx',accessKeySecret:'xxx',stsToken:'xxx',timeout:'xxx',bucket:'xxx'}
      type: Object,
    },
    // createOSS: {//是否在初始化时创建OSS实例
    //   type: Boolean,
    //   default: false
    // },
    imgWidth: {//图片宽度
      type: String,
      default: '196'
    },
    imgHeight: {//图片高度
      type: String,
      default: '146'
    },
    fileName: {//文件上传名-在阿里云的目录位置
      type: String,
    },
    uploadHeaders: {//文件上传携带头部
      type: Object,
    },
    videoPreview: {//是否开启视频预览
      type: Boolean,
      default: false
    },
    cancelUpload: {//是否开启取消上传功能
      type: Boolean,
      default: false
    },
    showProgress: {//是否显示上传视频的进度条
      type: Boolean,
      default: false