使用redux-form上传图像

Question

我有一个react.js redux-form,可以工作并将数据发布回我的API,但我还需要让提交者上传带有表单的图像,理想情况下是预览.我有点挣扎,已经到达了dropzone.js,但我似乎无法让我的表单实际发回图像数据.

render () {
  const FILE_FIELD_NAME = 'files';

    const renderDropzoneInput = (field) => {
      const files = field.input.value;
      return (
        <div>
          <Dropzone
            name={field.name}
            onDrop={( filesToUpload, e ) => field.input.onChange(filesToUpload)}
          >
            <div>Try dropping some files here, or click to select files to upload.</div>
          </Dropzone>
          {field.meta.touched &&
            field.meta.error &&
            <span className="error">{field.meta.error}</span>}
          {files && Array.isArray(files) && (
            <ul>
              { files.map((file, i) => <li key={i}>{file.name}<img src={file.preview}/></li>) }
            </ul>
          )}
        </div>
      );
    }

    return (
        <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
          <div className="form-group">
            <Field name="files" component={renderDropzoneInput} />
          </div>
          <button type="submit" className="btn btn-default">Submit</button>
        </form>
    );
}

该files变量确实被POST回到API,这很好,但它包含以下内容:

[preview=blob:http://localhost:3000/bed3762e-a4de-4d19-8039-97cebaaca5c1]

任何人都可以建议我如何获得该变量的实际二进制数据？

完整代码可在此处获得https://github.com/rushughes/dsloracle/blob/master/client/src/components/LandCreate/index.js

Answer 1

我最近遇到了一个类似的问题，并通过使用 FileReader API 将 blob url 转换为 Base64（也可以转换为二进制字符串）来解决它。

然后将 Base64 或二进制字符串发送到服务器。

我的示例代码：

onDrop(acceptedFiles: any): any {

    let images: any = this.state.Images;

    acceptedFiles.forEach((file: any) => {

        const reader: FileReader = new FileReader();
        reader.onload = () => {
            const fileAsBase64: any = reader.result.substr(reader.result.indexOf(",") + 1);
            images.push(fileAsBase64);
        };

        reader.onabort = () => console.log("file reading was aborted");
        reader.onerror = () => console.log("file reading has failed");

        reader.readAsDataURL(file);
    });

    this.setState(prevState => ({   
         Images: images,
    }));
}

如果你想发送一个二进制字符串而不是 base64 更改reader.readAsDataURL(file);为reader.readAsBinaryString(file);

而这一行：const fileAsBase64: any = reader.result.substr(reader.result.indexOf(",") + 1);可以简化为const file: any = reader.result;