前端vue实现阿里云OSS上传图片、视频

世界，太精彩

于 2020-05-25 17:48:30 发布

阅读量4.4k

点赞数 3

分类专栏：前端上传阿里云 vue 文章标签：阿里云 vue javascript upload

本文链接：https://blog.youkuaiyun.com/yifanfengshun3333/article/details/106288485

版权

本文档介绍了如何在Vue项目中结合element-ui使用阿里云OSS进行图片和视频上传。首先，需要下载ali-oss并封装上传组件。在Upload.vue组件中实现了上传功能，对于视频上传，还需设置回调以保存相关信息。在before-upload钩子中可以进行文件大小和格式的验证。参考阿里云官方文档和js-sdk的github地址，后续文章将讲述批量上传功能。

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

原来使用的是七牛上传，如今也加入阿里云上传的队伍了。这次给大家介绍如何结合element-ui实现阿里云上传。

首先，下载ali-oss:

npm install ali-oss --save-dev

接着，我们来封装上传的组件（支持图片和视频）。在components里新建Upload.vue文件，再新建一个src/views/ossUpload.vue文件调用这个封装好的上传组件。

在这里，图片上传不需要设置回调，上传视频需要设置回调存储视频的相关信息。

先来看components/Upload.vue，直接上代码:

<template>
  <div class="hello">
    <el-upload
      drag
      :show-file-list='true'
      class="uploader"
      action=""
      :auto-upload='false'
      :on-success="handleSuccess"
      :on-change="handleChange"
      ref="uploadInner">
      <img :src="imageUrl" alt="">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

最低0.47元/天解锁文章