Question

我将文件存储在云中，因此在上传过程中，他们会获得使其名称唯一的前缀。例如，如果我上传名为test.txt的文件，则在上传过程中会将其另存为7ea205f01ae5_test.txt。请务必注意，我会捕获并保存原始文件名。

在我的React组件中，我试图通过使用download属性使用户友好，这样当用户点击下载文件时，它将被下载为test.txt但它无法正常工作。该文件仍会以7ea205f01ae5_test.txt的形式下载。

这是我的React代码的样子

<a href={fileUrl} download={origName}>{fileName}</a>

我的组件看起来像这样的对象：

{
  id: 123,
  fileName: "7ea205f01ae5_test.txt",
  origName: "test.txt",
  fileUrl: "https://myBlobStorageUrl.com/container/7ea205f01ae5_test.txt?signature=123abcxyz"
}

请注意，fileUrl包含一个安全访问签名，允许用户访问该文件。没有它，用户将无法访问该文件。

我需要做什么才能将文件下载为test.txt？

Answer 1

正如DroidNoob所提到的，这并不是React特有的。任何交叉源链接都将使用给定文件名和扩展名的服务器进行下载，但download属性将适用于相同的源。

// Domain: example.org

// Downloads as 281c2df7dbce9284dca6059db944f8df.png
<a download="foo.txt" target="_blank" href="https://www.gravatar.com/avatar/281c2df7dbce9284dca6059db944f8df?s=48&d=identicon&r=PG">download</a>

// Downloads as foo.txt
<a download="foo.txt" target="_blank" href="http://example.org/assets/avatar.png">download</a>

根据您的后端，您可以设置一条路线，将原始名称一般映射到实际的文件名称。所以前端链接到你的后端映射器，然后轮流抓取文件。

在React组件中的锚标记中下载属性

1 个答案: