VUE-阿里云OSS上传组件

最新推荐文章于 2024-03-30 12:55:57 发布
最新推荐文章于 2024-03-30 12:55:57 发布
阅读量1.9k 收藏 6
点赞数 1
文章标签： vue.js 阿里云 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wumin_12345/article/details/124605583
版权

根据项目需求封装的一个阿里云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
    },
    ossSign: {//此次的上传的辨别标识
      type: String,
      default: ''
    }

  },
  data () {
    return {
      client: [],//OSS 上传图片实例(用于解析)
      showUrl: '',//图片/视频地址
      dialogVisible: false,//视频预览弹窗
      uploadProgress: null,//视频上传进度
    }
  },

  watch: {
    showFileUrl (newVal) {
      this.showUrl = newVal
    },
    configureOSS (newVal) {
      if (this.configureOSS) {
        // 创建oss实例:可用来解析图片或视频
        this.client = new OSS(newVal)
        this.showUrl = this.showFileUrl
      } else {
        this.$message.error('缺少OSS实例创建配置参数,请使用configureOSS传入配置参数');
      }
    }
  },
  computed: {
    // 解析出图片/视频的阿里云访问链接
    OSSUrl () {
      return function (object) {
        if (this.client !== null) {
          // console.log(client.signatureUrl(object))
        }
        return this.client === null || !object || object.length === 0
          ? ''
          : this.client.signatureUrl(object, { expires: 3600 * 12 })
      }
    },

  },
  methods: {
    getVal () {
      return clientArr
    },
    // 停止上传
    stopUpload () {
      console.log(this.ossSign, 99999);
      if (clientArr.length > 0) {

        let index = clientArr.findIndex(item => (item.id == this.ossSign && item.client != null));

        if (clientArr[index].client) {
          this.$emit('uploadSuccess', 'stop')
          clientArr[index].client.cancel()
          clientArr[index].client = null
        }
      }
    },
    // 上传视频或图片
    async uploadImageOrVideo (file) {
      // 避免标识id同一时间上传多个视频
      if (clientArr.length > 0) {
        if (clientArr.some(item => (item.client != null && item.id == this.ossSign))) {
          return
        }

      }
      // 创建一个oss实例
      if (this.configureOSS) {
        if (this.fileName) {

          // 创建oss实例:可用来解析图片或视频
          let client = new OSS(this.configureOSS)
          clientArr.push({ id: this.ossSign, client: client })
          let index = clientArr.findIndex(item => (item.id == this.ossSign && item.client != null));

          this.$emit('createdOSS', 'create')
          // 获取上传的本地视频的时长
          var binaryData = [];
          // 传入file中raw
          binaryData.push(file.raw);
          //获取视频或者音频时长
          var fileurl = URL.createObjectURL(new Blob(binaryData));
          //经测试，发现audio也可获取视频的时长
          var audioElement = new Audio(fileurl);
          audioElement.addEventListener("loadedmetadata", function (_event) {
            //audioElement.duration就是视频时长
            file.duration = audioElement.duration.toFixed(0);
          });

          this.uploadProgress = 0
          const fileName = this.fileName + file.name.replace(/.+\./, '.')
          clientArr[index].client.multipartUpload(fileName, file.raw, {
            parallel: 4,
            // 设置分片大小。默认值为1 MB，最小值为100 KB。
            partSize: 1024 * 1024,
            meta: {
              year: new Date().getFullYear(),
              month: new Date().getMonth() + 1,
            },
            headers: this.uploadHeaders,
            // 上传进度回调
            progress: (percent, checkpoint) => {
              if (percent === 1) {
                this.uploadProgress = null
                clientArr[index].client = null
              } else {
                let resprogress = {
                  progress: Number((percent * 100).toFixed(2)),
                  ossSign: this.ossSign
                }
                this.$emit('uploadProgress', resprogress)
                this.uploadProgress = Number((percent * 100).toFixed(2))
              }
            }
          }).then(result => {
            let res = {
              duration: file.duration,
              url: result.name,
              ossSign: this.ossSign
            }
            this.$emit('uploadSuccess', res)
          }).catch(err => {
            if (err.name == 'cancel') {
              this.uploadProgress = null
            }
          })
        } else {
          this.$message.error('上传的文件名不能为空!');
        }
      } else {
        this.$message.error('缺少OSS实例创建配置参数,请使用configureOSS传入配置参数');
      }

    },
    // 
    uploadBefore () {
      this.$emit('uploadBefore', 'upload')
    }

  },
  created () {


  }
}
</script>

<style scoped>
.avatar-uploader {
  border: 1px dashed #d9d9d9;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 196px;
  height: 146px;
  line-height: 178px; */
  text-align: center;
}
.avatar {
  /* width: 196px;
  height: 146px; */
  display: block;
}

.video-main {
  display: flex;
  align-items: center;
}
</style>

-Oss组件封装使用文档

  1. vscode启动项目后,安装ali-oss模块。然后在需要使用的文件中引入组件，注册并使用。（注：组件中有使用element ui，需要引用此组件的项目提供运行环境支持），示例：

  1. 使用组件。示例：

组件相关参数

  1. 方法

参数

说明

类型

默认值

必传

uploadType

上传的类型：image-图片，video-视频

String

image

否

showFileUrl

要显示的image/video在阿里云服务器上的地址

String

—

否

configureOSS

创建OSS实例所需的配置项： 示例：{region:'oss-cn-shenzhen',accessKeyId:'xxx',accessKeySecret:'xxx',stsToken:'xxx',timeout:'xxx',bucket:'xxx'}

Object

—

是

imgWidth

上传类型为image时，图片的宽度

String

196（仅传数值，固定px单位）

否

imgHeight

上传类型为image时，图片的高度

String

146（仅传数值，固定px单位）

否

fileName

文件上传名（在阿里云的目录地址）

String

—

是

uploadHeaders

文件上传是设置的头部请求（根据具体需求选择是否上传）

Object

—

否

videoPreview

是否开启视频预览

Boolean

false

否

cancelUpload

是否开启取消上传功能

Boolean

false

否

showProgress

是否显示上传视频的进度条

Boolean

false

否

ossSign

此次上传的标识（批量上传时用于辨别）

String

—

否

方法名

说明

备注

uploadSuccess

上传成功回调

uploadProgress

上传进度回调

同时使用多个组件时，数据可能会错乱。

uploadBefore

选择文件的触发事件

用于更新OSS示例参数

createdOSS

创建OSS实例时触发

用于监听创建的OSS数量

版本：1.0.0

说明：初始版本，后面会陆续补充和优化内容。

实际应用中，发现短时间内可触发上传按钮两次，可能会创建出两个实例，因此补充获取组件创建上传实例的方法：getVal()，具体使用如下：

在调用组件的父级页面：

然后获取子组件的创建实例情况：

注：上传视频完成会销毁对应的OSS实例，所以client不为空的及存在实例数。

版本：1.0.1

说明：优化了OSS实例创建规则，增加了OSS实例数获取方式。

wumin_12345
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue OSS上传图片 （依赖包为ali-oss）
01-07
vue中使用上传到OSS图片文件等操作。内含备注 直接调用唯一方法传参既可
Vue Element UI + OSS实现上传文件功能
01-19
在项目实践中，发现该上传方法上传大文件时会出现问题，所以决定使用阿里云对象存储服务（Object Storage Service，简称OSS），OSS详细介绍可以查看官网，本文主要讲解的是OSS上传文件的前端，后台开发请查看官网...
前端使用ali-oss实现文件上传到oss
yjITcsdn的博客
04-21 6006
ali-oss 安装依赖 npm/cnpm install ali-oss --save 创建自己的ossClient.js const OSS = require('ali-oss'); export default function Client(data='custom-data') { // console.log('bucket',data) return new OSS({ region: "custom-region", accessKeyId: "cus
Vue怎么使用Upload组件将图片上传到阿里云OSS，并返回图片URL
None_ones的博客
03-30 1162
基于前端用Vue2后端用Springboot进行讲解。
vue 上传文件到阿里云OSS
qq_38751315的博客
08-04 886
步骤一：安装依赖ali-oss npm install ali-oss -S 步骤二：配置oss对象 const OSS = require('ali-oss') const client = new OSS({ // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。 region: 'oss-cn-beijing', accessKeyId: '****', accessKeySecret: '***
阿里云 OSS
xiaowei20091124的专栏
08-31 7608
比如网站的 图片、视频等文件就可以存放在 OSS 中（海量数据，自己维护起来麻烦，交给其他人去维护），每次从 OSS 中获取即可。OSS 具有与平台无关的 RESTful API 接口，可以在任意应用、任意时间、任意地点 存储与访问 任何类型的数据。简单地理解：OSS 基于网络提供数据存储服务，通过网络可以随时存储、获取 文本、图片、音频、视频等 非结构化数据。对象是 OSS 存储的基本单位，由元信息（Object Meta）、数据（Data）、文件名（key）组成。存储类型分为：标准、低频访问、归档。..
vue项目中上传文件到阿里云oss方法
热门推荐
一键写代码的博客
02-16 1万+
vue项目中，如何实现阿里云oss上传，结合element-ui 的上传组件使用
使用Vue实现图片上传的三种方式
12-07
项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的...常见的 七牛云，OSS（阿里云）等，这些云平台提供API接口，调用相应的接口，文件上传后会返回图片存储在服务器上的路径，前端获得这个路径保存下来
阿里云ossjava源码-eshop:Eshop是一个在线商城系统，是一种基于微服务的分布式系统，部署在由Rancher管理的RKE安装的ku
06-06
阿里云 oss java源码介绍 Eshop 是一个在线商城系统，是一种基于微服务的分布式系统，部署在由 Rancher 管理的 RKE 安装的 kubernetes 集群上。 从业务的一致性来看，Eshop可以细分为四个微服务：admin、security、...
基于Vue+SpringCloud博客的设计与实现-微服务-分布式.zip
最新发布
05-03
基于Vue+SpringCloud博客的设计与实现---微服务基础版本组件1.0版本 ...用户文件头像上传中心：博客所用到的所有的图片和用户的图片均用阿里云OSS文件服务器，外网url，也可以采用本地机器存储。 用户签到中心
SpringBoot+Vue前后端分离学校教学管理系统
05-26
使用JWT实现单点登录，图片和文档上传使用阿里的OSS对象存储，短信功能使用腾讯云的接口，聊天功能使用了WebSocket实现实时聊天，整合Quartz框架实现定时任务的发布，整合了redis存储验证码。本系统使用的技术均吻合...
阿里OSS入门
哈
04-09 1395
简介 阿里云的官网：阿里云的官网 阿里云OSS 登录之后会出现如下界面： 点击“管理控制台”： 点击“创建 Bucket”： 创建Bucket的时候，会让你填写相关信息，一般来说我们只填名称和选择区域，其他都默认就好。选择完毕后，点击【确定】完成创建。 完成创建后，就可以看到存储空间 hcbucket1了，右边是空间的相关介绍。记住这个桶名 bucketName和Endpoint，等会写代码的时候需要。 阿里云的OSS只是一个服务，要使用服务，首先需要 AccessId 和 AccessKey
实现阿里云OSS文件上传
longxiaobai_WJ的博客
03-06 4572
OSS、服务端签名前端直传
阿里-oss
weixin_44383484的博客
11-22 590
阿里-oss
vue-oss阿里云上传图片
qq_39111074的博客
11-12 3800
先搭建vue框架，配置路由、添加图片上传页面链接、添加图片上传页面， 然后进行以下操作： 1. 首先到阿里云上面开通oss服务 2. 安装ali-oss包,vue项目根目录下执行命令- - -‘npm install ali-oss --save’ 安装ali-oss包，并记录到package.json文件- - -开发环境（devDependencies）和生产环境（dependencies）都需要安装这个依赖包 （–save -dev的表示只有开发环境安装依赖包） 3. 安装完成后，script中导
VUE图片上传阿里oss
weixin_40565812的博客
09-15 4244
VUE图片上传oss
vue前端直接使用element-ui的upload组件上传到阿里云OSS存储
weixin_48373171的博客
03-30 3517
（能看到这说明什么安装element-ui都会了，我就不详细介绍了，直接跳过）在执行下面操作之前，你要确定你的阿里云能看到上边这个页面这里主要是配置读写，只有设置成公共读写，才可以前端直接上传，不需要跟后端要什么token了（3）运行一下试试，咦，是不是报跨域问题了？没有恭喜你成功了，出现的小伙伴也不要着急，请看下图按上图配置，八九不离十，直接成功！
vue直传图片到阿里云OSS（单张直接上传）
_小郑有点困了的博客
12-06 5370
背景： 近期项目使用到多图片上传功能，常规的调用后端接口上传，可能会出现上传速度慢，体验不佳的情况。那么就考虑另一种上传方式。由前端直接上传到oss。快的一匹。。。 经过摸索，也实现了。代码其实没啥难度，问题都出在阿里云这里，例如：跨域，读写权限等等，以及一个十分恶心的坑（竟然不能把目标文件夹写到配置参数里面，就很无语，百试不得，后来拼在了图片路径前面，达到了效果） 首先你得去阿里云开启一个对象存储oss服务： 略 还得去创建一个AccessKey 这两个是关键项 还得创建一个bucket，用于存放
vue中使用ali-oss上传文件到阿里云上
xixi的博客
10-08 1709
3.使用element ui的 upload 组件进行上传。1.使用 npm 安装ali-oss。2.写ali-oss.js。
vue调用阿里云oss图片上传多张
07-28
在Vue中调用阿里云OSS进行多张图片上传，可以按照以下步骤进行操作： 1. 在你的Vue项目中安装ali-oss和element-ui（可选）依赖： ``` npm install ali-oss element-ui ``` 2. 在你的Vue组件中引入所需的库和样式：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值