Web端文件上传至阿里云OSS(基于Angular 5项目)

Becky

一、准备工作

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

Bucket配置图
可参考阿里官方文档: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

关于直传,阿里官方给了三种方案:

  1. 客户端 JavaScript 签名后直传;
  2. 客户端申请服务端签名,然后打包上传;
  3. 客户端申请服务端签名,打包上传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,来确定上传成功与否。

【参考资料】

  1. 阿里云官方文档:开始使用oss
  2. 阿里云官方文档:介绍如何在BrowserJS-SDK中快速使用访问OSS服务
  3. 微信公众号图片上传至阿里云OSS
  4. 前端图片直传OSS试验
  5. 如何基于OSS和MTS,快速搭建音视频文件上传服务?

声明:转发请注明出处,谢谢~

阅读 6.4k
7 声望
1 粉丝
0 条评论
7 声望
1 粉丝
文章目录
宣传栏