存储在Redux中选择的输入文件以便稍后上载

Question

我有一个带有类型文件的输入作为React组件。这是多页表单的一部分。因此，对于表单中的文本字段，我将数据存储在Redux中，以便最后我可以在最后上传所有数据。

这适用于文本字段。但是对于输入文件的输入，我看不出它是如何工作的。

如何存储在Redux中选择的文件，以便最后我可以将其作为数据的一部分上传到最后？

Answer 1

您可以使用与存储其他文本字段相同的方式存储文件。 The value attribute of a input of type file contains the path of the file saved as string.此值可以作为字符串字段保存在Redux存储中。

当您最终处理form输入时，您可以使用此值加载文件并将其发送到服务器。根据{{​​3}}

  

使用HTML表单发送文件是一种特殊情况。文件是二进制数据 - 或者被认为是这样 - 而所有其他数据都是文本数据。由于HTTP是文本协议，因此处理二进制数据有特殊要求。

     

enctype属性此属性可让您指定值   Content-Type HTTP标头包含在生成的请求中   表格已提交。这个标题非常重要，因为它告诉了   服务器正在发送什么样的数据。默认情况下，其值为   application/x-www-form-urlencoded。从人的角度来说，这意味着：“这个   是已编码为URL参数的表单数据。“

     

如果要发送文件，则需要执行三个额外步骤：

     

  
1. 将method属性设置为POST，因为文件内容无法放入网址参数中。
  

2. 将enctype的值设为multipart/form-data   因为数据将被分成多个部分，每个部分对应一个文件   加上一个表单正文中包含的文本数据（如果文本也是   进入表格）。

  

3. 包含一个或多个File picker小部件   允许您的用户选择将要上传的文件。