npm 包 ngx-s3-presigned-uploader 使用教程

前言

在前端开发中，我们经常需要上传文件到云端。如果直接将文件上传到云端需要求经验证的 AWS 等服务的认证，这对我们来说有很大的麻烦。ngx-s3-presigned-uploader 就是为了解决这些问题而生的，使用这个 npm 包我们能够更方便快速的上传文件到 AWS S3 服务器。

环境准备

在使用 ngx-s3-presigned-uploader 之前，你需要先准备好以下环境：

• AWS S3 服务器账号
• Node.js 环境
• Angular 环境

如果你已经拥有了以上环境，则可以继续进行下一步操作。

安装

在进行安装 ngx-s3-presigned-uploader 之前，你需要先将 aws-sdk 添加为你的开发依赖。你可以使用以下命令完成安装：

npm install aws-sdk --save-dev

接着，你可以使用以下命令来安装 ngx-s3-presigned-uploader：

npm install ngx-s3-presigned-uploader --save

使用

ngx-s3-presigned-uploader 包括了一个用于上传文件的指令：s3-upload。使用这个指令，我们可以轻松地将文件上传到 AWS S3 服务器。

对于使用 Angular 的用户来说，你需要在你的模块中导入 S3UploadModule。

import { S3UploadModule } from 'ngx-s3-presigned-uploader';

@NgModule({
  imports: [
    S3UploadModule
  ]
})
export class AppModule { }

在你的组件中，你需要先导入 S3UploaderService，并在构造函数中将它注入到当前组件中。

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ --------- - ---- -----------------
------ - ------------------ -------------------- - ---- ----------------------------

------------
  --------- -----------
  ------------ -----------------------
  ---------- -----------------------
--
------ ----- ------------ -
  ----- ----------

  ------------------- ------------ ------------ ------- ----------- ------------------ -
    --------- - ------------------------
      ----- --
    ---
  -
-

在你的 HTML 文件中，你需要使用 s3-upload 指令来上传文件，并将文件绑定到表单控件上。

<form [formGroup]="form">
  <input type="file" formControlName="file" s3-upload />
  <button type="submit" (click)="upload()">上传</button>
</form>

最后，在你的组件中实现 upload 方法，这样就可以将文件上传到 AWS S3 服务器中了。

upload() {
  const file = this.form.get('file').value;
  const s3File = new S3FileUploadResponse(file);

  this.s3Uploader.uploadFile(s3File, 'my-bucket').subscribe((fileUrl) => {
    console.log(fileUrl);
  });
}

在这个例子中，我们指定将文件上传到名为 my-bucket 的桶中。在上传成功后，我们可以获取到文件的 URL。

总结

ngx-s3-presigned-uploader 是一款非常方便快捷的 npm 包，可以帮助我们将文件上传到 AWS S3 服务器中。在这篇文章中，我们介绍了如何使用 ngx-s3-presigned-uploader 和如何将文件上传到云端服务器中。希望这篇文章能对你有所帮助，并且对于使用 ngx-s3-presigned-uploader 和 AWS S3 服务器的开发者有所指导意义。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d281e8991b448e01d9