使用 redux-form 上传图片

Question

我有一个 react.js redux-form 可以工作并将数据发送回我的 API，但我还需要允许提交者上传带有表单的图像，最好是预览。我有点挣扎，已经到了 dropzone.js，但我似乎无法让我的表单实际 POST 图像数据。

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

以下是file-upload 功能的步骤：（如何在您的 API 中处理图像数据）

• 将您的 redux-form 值附加到 FormData 实例。

  let formData = new FormData();
  formData.append('myFile', files[0]);
  

• 使用axios 或fetch 库从客户端向您的API 发送multipart/form-data 请求：

• 在您的 API 中接收multipart/form-data 请求，使用multer 处理它，然后将文件写入disk storage 或memory storage，如下所示：

  $ npm install --save multer
  

  const multer  = require('multer')
  
  const storage = multer.diskStorage({
    destination: function (req, file, cb) {
    cb(null, '/tmp/my-uploads')
   },
    filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
   }
  })
  
  const upload = multer({ storage: storage })
  
  const app = express()
  
  app.post('/upload', upload.single('myFile'), (req, res, next) => {
    // req.file is the `myFile` file
    // req.body will hold the text fields, if there were any
   })
  

• （可选）使用Express Serve-Static直接从您的 API 提供文件

Answer 2

我最近遇到了类似的问题，通过使用 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;

Answer 3

对于带有 Dropzone 的 React.js 有可用的解决方案。请参考以下内容：

http://reactdropzone.azurewebsites.net/example/

可以在此处找到哪些代码： https://react.rocks/example/React-Dropzone

此外，这些解决方案还将以某种方式帮助您摆脱问题：

https://github.com/react-dropzone/react-dropzone

https://medium.com/technoetics/handling-file-upload-in-reactjs-b9b95068f6b

http://blog.mauriziobonani.com/dropzone.js-react.js-and-fluxxor-integration/

https://css-tricks.com/image-upload-manipulation-react/

https://www.reddit.com/r/reactjs/comments/6k6fjr/reactdropzone_integration_with_react/