前端vue 配合ali-oss上传文件到阿里云

1. 安装ali-oss

npm i ali-oss -D (安装到生产依赖)

2.引入

const OSS = require("ali-oss");

3.调用接口获取阿里云OSS的region、accessKeyId、accessKeySecret、bucket以及要存放的文件夹名称（就是下面第五步中使用当前时间拼接完整的文件名称的filePath）

4.使用

let client = new OSS({
region: region,
accessKeyId: accessKeyId,
accessKeySecret: accessKeySecret,
bucket: bucket

});

注意点: region 为 "oss-cn-hangzhou" (后面的hangzhou可以是其他的地区简写, 具体看自己的阿里云)不需要加后面的aliyun.com，它会自动拼接成完整的url

5. 上传文件

获取文件流 ===》 let file = this.$refs.fileName.files[0] 或者是原生的 document.getElementById("fileName").files[0]

获取当前选择的文件名 ===》 let val = this.$refs.fileName.value 或者是原生的document.getElementById("fileName").value

截取文件后缀名 ==》 let suffix = val.substr(val.indexOf(".")); / let suffix = val.substring(val.indexOf("."));

使用当前时间拼接完整的文件名称 ===》 let storeAs = `/${_confValue.filePath}/${this.timestamp()}${suffix}`;

最后调用multipartUpload方法即可完成上传： storeAs是完整的文件名称包括在哪个文件夹下main，file是将要上传的文件流

client

.multipartUpload(storeAs, file)

.then(result => {

let _res = result.res;

if (_res.status === 200 && _res.statusCode === 200) {

这里是指文件上传到阿里OSS成功，之后可以调用后端接口判断此文件是普通上传、追加上传还是覆盖上传、、、、、、、弹个窗就好了

}

}）

前端vue 配合ali-oss上传文件到阿里云相关推荐

JS：Vue项目浏览器直接上传文件到阿里云OSS
OSS Browser.js SDK文档: https://help.aliyun.com/document_detail/64041.html OSS设置路径:权限管理-跨域设置将来源设置成 * ...
微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
java上传文件至阿里云oss工具类
第一步:引入oss maven坐标 <dependency><groupId>com.aliyun.oss</groupId><artifactId>a ...
Android（安卓）上传文件到阿里云点播，阿里云点播转码
Android(安卓)上传文件到阿里云点播,阿里云点播转码文章目录 Android(安卓)上传文件到阿里云点播,阿里云点播转码一:登录阿里云点播平台配置添加转码模板组 1:需要什么参数,可自行填写 ...
mac SCp上传文件到阿里云服务器centos
1.mac链接远程阿里云服务器centos命令: ssh -A -p 22 root@ip 2.mac上传文件到阿里云centos: 3.阿里云服务器weapps下文件删除命令: 4.上传文件相关 m ...
上传文件到阿里云linux服务器
上传文件到阿里云linux服务器安装Putty软件(用来连接阿里云服务器的一款软件,里面有用来上传文件到服务器的可执行文件) 参考以下网址: https://help.aliyun.com/docu ...
go 使用 gin 上传文件到阿里云oss存储
本文使用 go 版本是: go version go1.13 linux/amd64 阿里云oss go sdk版本:v2.0.4 官网可以下载 linux版本是:Linux version 3.1 ...
vue 上传文件至阿里云oss
先让后端在阿里云里面处理跨域问题参考这篇文章 vue直传图片到阿里云OSS(单张直接上传)__小郑有点困了的博客-CSDN博客_vue 阿里云背景:近期项目使用到多图片上传功能,常规的调用后端接 ...
小程序上传文件到阿里云oss
本文仅举例上传图片和上传视频! 准备工作: 需要引入的js文件:https://download.csdn.net/download/impossible1994727/12328614 参考文档:h ...

前端vue 配合ali-oss上传文件到阿里云

前端vue 配合ali-oss上传文件到阿里云相关推荐

最新文章

热门文章