Uppy - 你如何通过多部分上传到 s3？使用伴侣？答案

【问题标题】：Uppy - How do you upload to s3 via multipart? Using companion?Uppy - 你如何通过多部分上传到 s3？使用伴侣？
【发布时间】：2021-03-08 15:23:05
【问题描述】：

https://uppy.io/docs/aws-s3-multipart/

Uppy 多部分插件听起来正是我需要的，但我不知道如何做后端部分。我得到的印象是我需要设置一个同伴来将上传路由到 S3，但找不到任何有关为此设置同伴的详细信息。

我可以看到很多关于使用 Companion 获取外部内容的参考资料，但在分段 S3 上传中没有。

我在 Uppy 内部看不到任何提供 AWS 凭证的地方，这让我更加想 Companion。

但是完成分段上传需要 4 个步骤，我看不出提供一个随播网址对 Uppy 有何帮助。

在此先感谢任何可以帮助或帮助我朝正确方向前进的人。

【问题讨论】：

到目前为止，这是这个包最大的失败。我已经尝试了很长时间来弄清楚这一点，而且似乎没有其他人完成了这一点，而且文档没有充分解释如何做到这一点，这令人失望。如果你愿意，我已经尝试了一段时间了。查看此页面以获取可能方向的提示github.com/transloadit/uppy/issues/1189#issuecomment-445521442
我已经开始了另一个与此相关的 StackOverflow 主题，如果您仍在研究此问题，我已经能够提出。 stackoverflow.com/questions/67201655/…

标签： amazon-web-services amazon-s3 aws-lambda uppy

【解决方案1】：

为 Uppy 提供一个伴随 URL 可以让 Uppy 向the-passed-url.com/s3/multipart 发起一系列请求。然后你需要配置你的服务器来处理这些请求。您的服务器将是您为 AWS 处理凭证的地方。

简而言之，当您单击 Uppy 中的上传按钮时，会发生以下情况：

Uppy 向/s3/multipart 发送发布请求以创建/启动分段上传。
使用上一个请求返回的数据，Uppy 将向 /s3/multipart/{uploadId} 发送一个获取请求，以生成 AWS S3 预签名 URL 以用于上传部件。
Uppy 然后将使用先前请求中的预签名 URL 上传这些部分。
最后，Uppy 会向/s3/multipart/{uploadId}/complete 发送一个post 请求以完成分段上传。

我能够使用 Laravel/Vue 完成此任务。我不知道你的环境是什么，但我已经发布了我的解决方案，它应该会有所帮助，特别是如果你的服务器使用 PHP。

Configuring Uppy to Use Multipart Uploads with Laravel/Vue

【讨论】：

在哪里可以找到有关这些 API 调用的响应应该是什么样子的文档？是否可以为请求配置标头？我需要一个 API 密钥来向 API 网关进行身份验证。

【解决方案2】：

我正在共享 AWS S3 Multipart 的代码 sn-ps [github]

如果您将 Companion 添加到组合中，您的用户将能够绕过客户端从远程资源（例如 Instagram、Google Drive 和 Dropbox）中选择文件（因此 5 GB 的视频不会影响您的用户）数据计划），然后上传到最终目的地。上传完成后或合理超时后，文件将从 Companion 中删除。出于安全原因，访问令牌也不会长期存在。

设置companion服务器：

1：设置 s3 配置。

Uppy 自动生成上传 URL 并将文件放入上传目录。

s3: {
      getKey: (req, filename) =>{
        return `uploads/${filename}`;
      },
      key: 'AWS KEY',
      secret: 'AWS SECRET',
      bucket: 'AWS BUCKET NAME',
    },

2：支持从远程资源上传 Uppy 为我们处理一切。我们只需要提供来自不同远程资源（如 Instagram、驱动器等）的密钥和令牌。

示例：云端硬盘上传

生成谷歌密钥并从谷歌秘密并将其添加到代码中
为身份验证添加重定向 URL

3：本地运行节点服务器

const fs = require('fs')
const path = require('path')
const rimraf = require('rimraf')
const companion = require('@uppy/companion')
const app = require('express')()

const DATA_DIR = path.join(__dirname, 'tmp')

app.use(require('cors')({
  origin: true,
  credentials: true,
}))
app.use(require('cookie-parser')())
app.use(require('body-parser').json())
app.use(require('express-session')({
  secret: 'hello planet',
}))

const options = {
  providerOptions: {
    drive: {
    key: 'YOUR GOOGLE DRIVE KEY',
    secret: 'YOUR GOOGLE DRIVE SECRET'
    },
    s3: {
      getKey: (req, filename) =>{
    return `uploads/${filename}`;
      } ,
      key: 'AWS KEY',
      secret: 'AWS SECRET',
      bucket: 'AWS BUCKET NAME',
    },
  },
  server: { host: 'localhost:3020' },
  filePath: DATA_DIR,
  secret: 'blah blah',
  debug: true,
}

try {
  fs.accessSync(DATA_DIR)
} catch (err) {
  fs.mkdirSync(DATA_DIR)
}
process.on('exit', () => {
  rimraf.sync(DATA_DIR)
})
app.use(companion.app(options))
// handle server errors
const server = app.listen(3020, () => {
  console.log('listening on port 3020')
})

companion.socket(server, options)

设置客户端：

1：客户端 HTML 代码：此代码将允许从驱动器、网络摄像头、本地等上传。您可以对其进行自定义以支持更多远程位置。

将伴随 URL 添加为上述节点服务器运行 URL(http://localhost:3020)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Uppy</title>
    <link href="https://releases.transloadit.com/uppy/v1.29.1/uppy.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="drag-drop-area"></div>

    <script src="https://releases.transloadit.com/uppy/v1.29.1/uppy.min.js"></script>
    <script>

    Uppy.Core({
        debug: false,
        autoProceed: false,
        restrictions: {
        maxNumberOfFiles: 5,

        }
    }).
    use(Uppy.AwsS3Multipart, {
        limit: 4,
        companionUrl: 'http://localhost:3020'
    }).
    use(Uppy.Dashboard, {
        inline: true,
        showProgressDetails: true,
        showLinkToFileUploadResult: false,
        proudlyDisplayPoweredByUppy: false,
        target: '#drag-drop-area',
    }).use(Uppy.GoogleDrive, { target: Uppy.Dashboard, companionUrl: 'http://localhost:3020' })
    .use(Uppy.Url, { target: Uppy.Dashboard, companionUrl: 'http://localhost:3020' })
    .use(Uppy.Webcam, { target: Uppy.Dashboard, companionUrl: 'http://localhost:3020' });
    </script>
  </body>
</html>

【讨论】：