如何在文件夹资产angular7下上传图像并保存？答案

【问题标题】：How upload image and saving under Folder assets angular7?如何在文件夹资产angular7下上传图像并保存？
【发布时间】：2019-06-29 02:11:17
【问题描述】：

我想在 Angular 中上传一张图片并将其保存在文件夹资源下（不使用 API）

【问题讨论】：

据我所知，无法在没有 API 的情况下写入服务器
您必须编写服务器端代码。 Angular 是客户端，不能直接上传文件...
如果你不想写后端，你可以使用 Firebase
没有 API Angular 是不可能的客户端

标签： angular angular6 angular7

【解决方案1】：

如果您使用带有客户端 SDK（例如 AWS S3）的静态文件主机，您可以这样做。

假设您在名为 mysite.com 的 s3 存储桶中进行托管，并且您已将此存储桶资产文件夹配置为允许公开上传（可能是个坏主意...）

在您的项目中，您已运行 npm install aws-sdk

你有一些类似的aws上传服务

import {Injectable} from '@angular/core';
import * as AWS from 'aws-sdk';

const BUCKET = 'mysite.com';

@Injectable()
export class AwsUploadService {

   private s3 = new AWS.S3({
     apiVersion: '2006-03-01',
     params: {Bucket: BUCKET}
   });

   uploadToAssets(file: File) {
      this.s3.upload({
        Key: 'assets/' + file.name,
        Body: file
      }, (err, data) => {
         console.log(err, data); // this will tell you if it went ok or not
      });
   }
}

然后您可以根据需要使用要上传的文件调用该上传函数，但同样，这可能是一个坏主意，您最好拥有一个服务器。如果您不使用静态文件主机，那么如果不编写服务器，您真的无能为力。

这里有更多关于在浏览器中使用 s3 的信息：https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

【讨论】：

【解决方案2】：

在没有 API 的情况下上传图片将是静态的。

【讨论】：

【解决方案3】：

Angular 是客户端代码。也就是说，当请求访问 Angular 应用程序时，它会下载到客户端机器并在那里运行。如果您进行任何更改，它仅在您的浏览器会话中可用。一旦您关闭并再次打开，即再次打开发出新请求，您将获得打开时的应用程序。因此，要持久保存任何更改，您必须将其发送到服务器，为此您需要一个服务器端应用程序 (API)。

【讨论】：