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

darkerXi 发布于2019-08-23 13:56 / 3514人阅读

摘要：一准备工作开通阿里云服务，从控制台上获取和。参考资料阿里云官方文档开始使用阿里云官方文档介绍如何在中快速使用访问服务微信公众号图片上传至阿里云前端图片直传试验如何基于和，快速搭建音视频文件上传服务声明转发请注明出处，谢谢

一、准备工作

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文件的中包含如下标签：

2. 项目中安装ali-oss

npm install ali-oss --save

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

这里使用第二种。

三、使用OSS

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

客户端 JavaScript 签名后直传；

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

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

这里使用第一种。

1. aliUploadDemo.component.html，使用input元素选择文件

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，快速搭建音视频文件上传服务？

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

云服务器上传文件至阿里云oss服务器阿里云oss挂载到服务器上传文件文件上传至阿里云服务器上通过邮件上传文件至阿里云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99798.html

微信公众号图片上传至阿里云OSS

摘要：最近在做微信公众号，需要将图片上传至阿里云。利用模块将图片写到内存微信多媒体文件文件路径图片上传阿里云结果上传文件出错这种方式将图片暂存在内存里面，那如果并发量很大，是不是内存要爆炸了都感觉还是不可取。最近在做微信公众号，需要将图片上传至阿里云OSS。在做这个功能的过程中，我走了不少弯路，尝试过很多种方法，最后终于研究出一种便捷优美的方式。现在把这些方法和思路记录下来，避免遗忘。一...

whatsns 2019-08-20 14:17 评论0 收藏0
基于Flask-Angular的项目组网架构与部署

摘要：基于网，分享项目的组网架构和部署。项目组网架构架构说明流项目访问分为两个流，通过分两个端口暴露给外部使用数据流用户访问网站。通过进行配置，使用作为异步队列来存储任务，并将处理结果存储在中。基于Raindrop网，分享项目的组网架构和部署。项目组网架构 showImg(https://cloud.githubusercontent.com/assets/7239657/1015704...

kelvinlee 2019-06-24 17:48 评论0 收藏0
使用axios上传文件到阿里云对象文件存储服务器oss

摘要：背景可用于图片音视频日志等海量文件的存储。支持流式写入和文件写入两种方式。这种方式的缺点是，文件要先上传到应用服务器，再上传到，占用带宽资源，过程虽然简单易于操作但是比较繁琐。这里是上面服务端返回的签名对象上传文件名背景 OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。OSS支持流式写入和文件写入两种方式。使用阿里...

刘玉平 2019-08-02 16:02 评论0 收藏0
使用axios上传文件到阿里云对象文件存储服务器oss

摘要：背景可用于图片音视频日志等海量文件的存储。支持流式写入和文件写入两种方式。这种方式的缺点是，文件要先上传到应用服务器，再上传到，占用带宽资源，过程虽然简单易于操作但是比较繁琐。这里是上面服务端返回的签名对象上传文件名背景 OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。OSS支持流式写入和文件写入两种方式。使用阿里...

jas0n 2019-08-22 18:04 评论0 收藏0