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

上一篇: Angular 4.x FAQ 下一篇:AngularJS 笔记

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

发布时间：2019-06-10 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Web端文件上传至阿里云OSS（基于Angular 5项目），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、准备工作
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>中包含如下标签：

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="" tITle="" data-original-title="复制">
      
      
<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 @H_108_126@type="file" [(ngModel)]="fileVal" (change)="fileEvent($event)">

2. aliUploadDemo.component.ts

      
      
      LOG(err);
            return;
        }
    }).then((result) => {
    console.log(result);
}

}
" title="" data-original-title="复制">
      
      
// 导入 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，快速搭建音视频文件上传服务？

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