时间戳

首页 > 解决方案 > 使用 React-uploady 组件引用文件名和内容的问题

reactjs - 使用 React-uploady 组件引用文件名和内容的问题

问题描述

我正在尝试使用 react-uploady 库。这是我的主要组成部分：

<Uploady
          // debug
          destination={{ url: '/s3createObject', headers: {'filekey': nodePath[nodePath.length-1].Key + props.file.name, 
                                                            'accept': '*.jpg'},
                                                  params : {'body': uploadBody}} }
          >
          <UploadyButton></UploadyButton>
          <PreviewsContainer>
            <UploadPreview rememberPreviousBatches PreviewComponent={QueueItem} />
          </PreviewsContainer>
        </Uploady>

我无法弄清楚如何引用正在上传的当前文件的文件名和内容。我需要将这些详细信息传递给我的服务器端点（在参数中）。

任何人都可以帮忙吗？

标签： reactjsreact-hooks

解决方案

有类似的问题，但我只需要文件名，使用 useRequestPreSend 将数据发送到服务器。它在他们的文档中

我的组件钩子看起来像这样：

const UploadContainer = ({ items }) => {
  useRequestPreSend(({ items }) => {
    const documentName = items[0].file.name

    return {
      options: {
        destination : {
          params: {
            document_name: documentName,
          }
        }
      }
    }
  })

...
return (
...
}

上传组件：

  <Uploady
    destination={{
      url: url,
      params: {
        "document_name": "",
      }
    }}
    debug="true"
    method="POST"
    multiple={false}
  >
    <UploadDropZone
      className="upload-dropzone"
      onDragOverClassName="drag-over"
      grouped={false}
    >

      <UploadContainer items={props.items} />
    </UploadDropZone>
  </Uploady>

推荐阅读