1

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

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

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

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

但是有 4 个步骤可以完成分段上传，我看不出提供一个伴随 url 将如何帮助 Uppy。

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

4

2 回答 2

0

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

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

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

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

使用 Laravel/Vue 配置 Uppy 以使用分段上传

于 2021-04-23T14:37:30.063 回答
0

我正在分享 AWS S3 Multipart [ github ]的代码片段

如果您将 Companion 添加到组合中，您的用户将能够绕过客户端从远程资源（例如 Instagram、Google Drive 和 Dropbox）中选择文件（因此 5 GB 视频不会占用您用户的数据计划） ，然后上传到最终目的地。上传完成后或合理超时后，文件将从 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>
于 2021-06-19T17:42:03.020 回答