阿里云 oss多文件上传

平时在做 oss 上传时，通过都是单个文件上传，但是前几天工作时涉及到多个文件的上传，在所有文件都上传完成后才能再做后续的代码执行。于是在原有的oss上传基础上添加for循环去挨个上传。
介绍一下，oss 的上传可以有两种：

一种是把所有的文件上传给后端，由后端去传到阿里云oss上，这样不涉及到向后端获取accessKeyId 和bucket等，没有key泄露的风险（适用于C端客户）。
一种是向后端调接口获取key等数据，存储在本地，需要的时候调用就可以了，key值设置失效时间，一段时间过后，再向后端获取新的key值，减少key泄露（适用于B端客户）。

第一种，我们就不过多介绍了，就平常的调用上传接口，这篇文章主要介绍第二种
所用到的框架：vue + typescript + element-ui +ali-oss
效果：

<!--
on-preview :点击文件列表中已上传的文件时的钩子
on-remove :文件列表移除文件时的钩子
on-change: 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
disabled: 是否可上传、添加、删除等
-->
<el-row class="toolbar"><el-uploadaction="#":auto-upload="false"list-type="picture-card"ref="modelFormId":on-preview="handlePictureCardPreview":on-remove="handleRemove":on-change="onChangeFileValid":disabled="isLook"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog><el-button @click='upload'>开始上传</el-button></el-row>

该引入的插件和文件

<script lang="ts">
import Vue from "vue";
import { Component, Prop, Watch } from "vue-property-decorator"; // typescript导入组件装饰器
// 自己写的生成的36位文件名称id标识
import { Common } from "@/assets/js/common";
// 安装 ali-oss 这也是文件上传阿里云时需要用到的
import OSS from "ali-oss";
// 向后端获取oss key的接口
import { getPublicUpOssSTS } from "@/api/download";

@Component({})
export default class Upload extends Vue {ossComPath: string = "ictr-tb-commonservice-test"; // 上传文件时文件所在的文件夹地址dialogImageUrl: string = ""; // el-upload 放大文件时的url地址dialogVisible: boolean = false; // el-upload 是否正在预览文件common: any = new Common(); // new 一下commonpathName: string = ""; // 上传文件的idisLoaderVisible: boolean = false; // 上传文件时的标识fullscreenLoading: boolean = false; // 正在上传file: any = undefined; ossClient: any = {region: "oss-cn-beijing",accessKeyId: "",accessKeySecret: "",bucket: "",stsToken: ""};fileList: any[] = [];

// 点击开始上传按钮upload() {const loading = this.$loading({lock: true,text: "Loading",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)"});this.isLoaderVisible = true;// 判断签名是否过期,如果过期再次向后端获取签名，也就是keythis.setUploadParam().then(async status => {loading.close();if (status === 200) {// 开始调用上传方法this.multipartUpload();}},req => {loading.close();});}// 真正开始上传async multipartUpload(param) {if (this.fileList.length !== 0) {this.client = new OSS(this.ossClient);let storeAsList: any[] = [];//遍历要上传的文件，设置文件唯一名称this.fileList.forEach((m, index: number) => {// 自定义id键和自定义名称 const name = this.common.guid() + this.common.getFileExtendingName(param.name);storeAsList.push({storeAs: "adcp/DefaultFilePath/fileAnalysisTempSource/" + name,m});});// 等待全部上传成功await Promise.all(storeAsList.map((file, i) => {return this.multiBackPath(file.storeAs, file.m);}));//此时已经全部上传成功了this.$message.success("所有文件上传成功！");}}multiBackPath(storeAs, param) {return new Promise((resolve, reject) => {this.client.multipartUpload(storeAs, param.raw).then(result => {resolve(result);}).catch(err => {if (!this.client.isCancel()) {this.isLoaderVisible = false;this.$message.warning("上传失败-");reject();}});});}
文件上传之前判断签名是否过期setUploadParam() {// 判断本地是否有已存在osslet ossData = JSON.parse(localStorage.getItem("ossdata") as any);return new Promise((resolve, reject) => {if (ossData !== null && new Date(ossData.Expiration) > new Date()) {this.ossClient.accessKeyId = ossData.AccessKeyId;this.ossClient.accessKeySecret = ossData.AccessKeySecret;this.ossClient.stsToken = ossData.SecurityToken;this.ossClient.bucket = this.ossComPath;resolve(200);} else {// 如果本地oss key已过期，再向后端获取getPublicUpOssSTS().then((res: any) => {let json = JSON.parse(JSON.stringify(res.data));this.ossClient.accessKeyId = json.AccessKeyId;this.ossClient.accessKeySecret = json.AccessKeySecret;this.ossClient.stsToken = json.SecurityToken;this.ossClient.bucket = this.ossComPath;localStorage.setItem("ossdata", JSON.stringify(json));resolve(200);},() => {reject(400);});}});}// 文件成功添加在el-upload时触发的钩子onChangeFileValid(file) {let xls = file.name.split(".").pop();if (["jpg", "png"].includes(xls)) {// 每添加一个文件，就push到 fileList集合中this.fileList.push(file);} else {(this.$refs.modelFormId as any).clearFiles();this.$message.error("文件只能上传.jpg或.png的文件！");}return false;}//
// 删除上传的文件handleRemove(file, fileList) {this.fileList = fileList;}handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;}
}
</script>

阿里云 oss多文件上传相关推荐

使用阿里云OSS实现文件上传
概述场景文件上传,是程序开发中必须会使用到的一个功能,比如: 添加商品,用户头像,文章封面等需求富文本编辑(插件文件上传) 文件上传的原理是什么? 我们为什么要实现文件上传,其实就要共享资源,大家 ...
阿里云 oss服务器文件上传 java
前天做oss服务器文件上传,之前没了解过,做的过程中遇到许多问题,最终通过查阅相关资料解决了,特分享一下. 首先准备工作必要的jar 这里注意版本一致,不然就会报很多坑爹的错误.. 如果你断点调试在 ...
SpringBoot 系列教程(九十九)：SpringBoot整合阿里云OSS实现文件上传，下载，删除功能
一.前言之所以写这篇文章呢? 是因为最近在做文件上传时遇到一个问题,就是我们在以前使用传统Spring+SpringMVC+Mybatis框架开发Web项目的时候,都是将项目打包生成一个War包,然 ...
Spring boot上传文件（图片）到阿里云OSS（直接上传到应用服务器）
Spring boot上传文件(图片)到阿里云OSS(直接上传到应用服务器) 主要思路上传图片的思路有两种: 第一种是上传到应用服务器,再由应用服务器上传到OSS.这种适合上传的文件较小,较为简单, ...
阿里云 OSS SDK ：上传的图片直接访问变成下载问题解决
文章目录阿里云 OSS SDK :上传的图片直接访问变成下载问题解决 1.产生原因 2.解决方案阿里云 OSS SDK :上传的图片直接访问变成下载问题解决 1.产生原因上传的文件,未指定文件访 ...
使用阿里云OSS实现图片上传案例
文章目录前言一.OSS是什么? 二.使用步骤 1.开通OSS服务 2.创建bucket 3.创建子账户 4.查看帮助文档,编写后端代码 5.layui前端总结前言在正式的开发环境中,类似图片 ...
vue plupload 的使用，阿里云OSS PHP 安全上传
1. 首选npm安装plupload 2. 阿里云OSS PHP 安全上传 <template> <div class="imgUpload"> ...
阿里云oss简单的上传下载删除（java）
阿里云oss上传和下载. 配置maven  ...
**关于阿里云oss图片批量上传问题解析**
关于阿里云oss图片批量上传问题解析背景最近在项目开发过程中遇到的问题,消耗了比较久的时间,过程曲折,虽然最终达到目的,但是鉴于各种常用的云数据在对象存储方面大同小异,所以记录一下. 理一下思路: ...

阿里云 oss多文件上传

阿里云 oss多文件上传相关推荐

最新文章

热门文章