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

最新推荐文章于 2021-12-09 14:47:16 发布

weixin_34174322

最新推荐文章于 2021-12-09 14:47:16 发布

阅读量759

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c077d1851882527796ad127

版权

一、准备工作

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

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

二、引入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
复制代码

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

这里使用第二种。

三、使用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，来确定上传成功与否。

【参考资料】

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

转载于:https://juejin.im/post/5c077d1851882527796ad127