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

时间 2019-12-05

标签 web 文件上传阿里 oss 基于 angular 项目栏目 HTML 繁體版

原文原文链接

1、准备工做

1. 开通阿里云OSS服务，从控制台上获取AccessKeyId和AccessKeySecret。html

2. 建立Bucket，并登陆OSS控制台前端

3. 配置Bucketgit

将allowed origins（来源）设置成 *
将allowed methods（容许methods）设置成 PUT, GET, POST, DELETE, HEAD
将allowed headers（容许headers）设置成 *
将expose headers（暴露headers）设置成 etag x-oss-request-id

可参考阿里官方文档：help.aliyun.com/document_de…

2、引入ali-oss

有两种方式：github

1. 在HTML文件的<head>中包含以下标签：npm

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.1.min.js"></script>
复制代码

2. 项目中安装ali-osssegmentfault

npm install ali-oss --save
复制代码

可参考阿里官方文档：github.com/ali-sdk/ali…微信

这里使用第二种。this

3、使用OSS

关于直传，阿里官方给了三种方案：阿里云

客户端 JavaScript 签名后直传；

客户端申请服务端签名，而后打包上传；

客户端申请服务端签名，打包上传OSS后回调服务端。

这里使用第一种。spa

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，来肯定上传成功与否。

【参考资料】

声明：转发请注明出处，谢谢～