vue 阿里云上传组件

vue 阿里云上传组件

测试项目git地址
本测试项目启动方法
示例链接
组件配置项

实践解释

本文主要介绍如何

  1. 在vue项目中使用web
  2. 直传方式上传阿里云oss图片

默认读者对vue框架和阿里云oss有一定的了解
整体的流程是加载好阿里云sdk -> 初始化上传客户端client -> 等待文件选择 -> 文件选择进行上传 -> 分发上传结果
可以直接复制代码使用,也可以npm 组件地址

npm 使用

$ npm i vue-oss-uploader

vue中引用

// main.js 安装插件
import vueOssUploader from 'vue-oss-uploader'
import 'vue-oss-uploader/npm/static/css/vue-oss-uploader.min.css'
Vue.use(vueOssUploader)

具体的配置项请查看组件配置项

配置项

名称意义类型默认值
debug是否开启debug模式Booleanfalse
path保存的路径String空字符串
nameMode文件名方式Number1(1随机名称,2默认名称,3自定义名称)
name自定义名称内容,当nameMode为3时生效String空字符串
fileType文件类型String默认img(会校验文件的后缀,校验正则为/.(pngjpe?ggifsvg)(?.*)?$/),暂时不支持其他值
fileSuffix文件后缀String空字符串(当本项不为空时表示只支持本后缀的文件上传)
keySet阿里云配置项Object详见配置项解释

keySet配置项

名称意义类型默认值
key阿里云的accessKeyIdString空字符串
secret阿里云的accessKeySecretString空字符串
bucket阿里云的bucketString空字符串
region阿里云所在区域Stringshanghai

事件

名称说明参数
error错误事件msg
success上传成功,返回路径和拼接的url{ossPath,ossUrl}
<!-- html中使用 -->
<vueOssUploader :path="path" :debug="true" :name-mode="nameMode" :keySet="keySet" :name="name" v-on:success="uploaded" @error="showError"></vueOssUploader>

使用过程中我碰到以下的坑:

1. 本文使用的是js引入形式的阿里云sdk,用npm形式的sdk会需要一些后端的node功能,不能用于web直传。

可以直接在html里面加上script标签

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script> 

组件里我包装了一个异步获取sdk的方法LoadJS,感兴趣的可以看一下

2. 使用js引入形式的sdk会有一个异步的问题,就是client初始化的时候sdk可能还没加载好,我是在vue的mouted钩子函数内设置了一个定时器,当SDK加载的完成之后再来初始化client

let timer = setInterval(() => {
  if (window.OSS) {
    this.init()
    clearInterval(timer)
    timer = null
    this.debug && window.console.log('阿里云oss初始化完成')
  } else {
    this.debug && window.console.log('阿里云oss初始化中...')
  }
}, 500)

3. 如果你的项目是https环境下的,需要保证初始化client的时候配置secure为true,不然无法上传文件

4. 在默认情况下,保存的图片名会取一个随机的字符串,但是同一张图片多次上传就会保存多个相同图片,这边我做了一个优化,将图片的大小和高宽拼接成一个字符串,再对这个字符串进行md5 hash化处理,这样同一张图片上传多次也只会保存一张

有什么问题或者疑问,请在下方评论或者在github上提issue都可以

参考链接

  1. 阿里云oss文档
  2. vue官网
    原文作者:NeoPasser
    原文地址: https://segmentfault.com/a/1190000013054033
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞