一、准备工作
1. 开通阿里云OSS服务，从控制台上获取AccessKeyId和AccessKeySecret。
2. 创建Bucket，并登录OSS控制台
3. 配置Bucket
- 将allowed origins（来源）设置成 *
- 将allowed methods（允许methods）设置成 PUT, GET, POST, DELETE, HEAD
- 将allowed headers（允许headers）设置成 *
- 将expose headers（暴露headers）设置成 etag x-oss-request-id
可参考阿里官方文档：https://help.aliyun.com/docum...
二、引入ali-oss
有两种方式：
1. 在HTML文件的<head>中包含如下标签：
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.1.min.js"></script>2. 项目中安装ali-oss
npm install ali-oss --save可参考阿里官方文档：https://github.com/ali-sdk/al...
这里使用第二种。
三、使用OSS
关于直传，阿里官方给了三种方案：
- 客户端 JavaScript 签名后直传；
- 客户端申请服务端签名，然后打包上传；
- 客户端申请服务端签名，打包上传OSS后回调服务端。
这里使用第一种。
1. aliUploadDemo.component.html，使用input元素选择文件
<input type="file" [(ngModel)]="fileVal" (change)="fileEvent($event)">
2. aliUploadDemo.component.ts
// 导入 ali-oss
import * as OSS from 'ali-oss'
...
export class AliUploadDemo{
client;
this.client = new OSS({
accessKeyId: 'your access key',
accessKeySecret: 'your access secret',
bucket: 'your bucket name',
region: 'oss-cn-hongkong'
});
// 获取文件
fileEvent(fileInput: any) {
const file = fileInput.target.files[0] // 获取文件资源
const reader = new FileReader()
if (file) reader.readAsDataURL(file) // 读取文件
this.uploadFile(file); // 调用上传方法
fileInput.target.value = '' // 重置以便下次可上传同个文件（以通过change检测）
}
/* 上传文件至阿里云OSS
* 官方解释：通过new OSS来创建client，创建后返回的是Promise,
* 类似于callback的方式，在.then()中处理返回的结果，在.catch()中处理错误。
*/
uploadFile(file){
this.client.put(aliName, file.fileVal).catch((err) => {
if (err) {
console.log(err);
return;
}
}).then((result) => {
console.log(result);
}
}
至此，上传操作已完成啦。可通过查看你的Bucket，或者通过返回的result，来确定上传成功与否。
【参考资料】
- 阿里云官方文档：开始使用oss
- 阿里云官方文档：介绍如何在BrowserJS-SDK中快速使用访问OSS服务
- 微信公众号图片上传至阿里云OSS
- 前端图片直传OSS试验
- 如何基于OSS和MTS，快速搭建音视频文件上传服务？
声明：转发请注明出处，谢谢～
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。