使用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); to reader.readAsBinaryString(file);

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

Answer 2

以下是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 3

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

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/

Answer 4

使用节点服务器处理图像上载

尝试使用formidable捕获服务器端点函数中的文件

app.post('/upload', function (req, res) { // express endpoint 
    var form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) { // "req" is server request object
       fs.rename(files.file.path, "/tmp/" + files.file.name); // move file to desired location
    });

    // handle rest of text fields from req.body if there are any
});

这是node express示例，但您可以使用节点http作为强大的示例