javascript - react 良好的 uploader 不绑定(bind)到表单

Question

我正在尝试包含 fine uploader在我的 React 应用程序中使用 react fine uploader 。我需要将图像拖放区绑定(bind)到我的表单，以便当我按“提交”和其他表单数据时，图像将被发送到后端。 (这样我就可以正确地将任何图像分配给正确的数据库项目)。

由于某种原因，这种情况没有发生，fineuploader 尝试立即发布图像。

这是我的 ImagesUploader 组件:

import React from "react";

import FineUploaderTraditional from "fine-uploader-wrappers";
import Gallery from "react-fine-uploader";
import "react-fine-uploader/gallery/gallery.css";

const uploader = new FineUploaderTraditional({
  options: {
    core: { multiple: false },
    deleteFile: {
      enabled: true,
      debug: true,
      disableCancelForFormUploads: true
    },
    form: {
      interceptSubmit: true,
      autoUpload: false,
      element: document.getElementById("upload-area")
    },
    callbacks: {
      onComplete: function(id, name, response) {
        if (response.success) {
          console.log("UPLOAD SUCCESS");
        } else {
          console.log("problem uploading stuff");
        }
      }
    }
  }
});

const ImagesUploader = props =>
  <div id="upload-area">
    <Gallery uploader={uploader} />
  </div>;

export default ImagesUploader;

这是使用上面组件的表单的组件:

import PropTypes from "prop-types";
import React from "react";
import { connect } from "react-redux";
import { reduxForm, SubmissionError } from "redux-form";

import Field from "../Users/Field";
import { SubmitButton, Title } from "../Users/styles";

import * as f from "../../libs/functions";
import { saveitem } from "../../actions/itemActions";
import ImagesUploader from "../ImagesUploader/ImagesUploader";

import { currentitem } from "../../reducers/combined/currentitem";

const doSaveItem = (data, dispatch, props) => {
  return dispatch(saveitem(props.item.id, data)).catch(response => {
    throw new SubmissionError(f.errorsFromProps(response));
  });
};

const itemForm = props => {
  // inspect(props, "form props");
  const { errors, handleSubmit, pristine, reset, submitting } = props;
  return (
    <form
      onSubmit={handleSubmit(doSaveItem)}
      action="/FORMimage"
      id="qq-form"
      method="post"
      enctype="multipart/form-data"
    >
      <Field
        name="title"
        type="text"
        placeholder="Titolo"
        label="Titolo"
        errors={errors}
      />
      <Field
        name="description"
        type="text"
        placeholder="descrizione"
        label="Descrizione"
        errors={errors}
      />
      <ImagesUploader />
      <SubmitButton type="submit" disabled={pristine || submitting}>
        Save
      </SubmitButton>
    </form>
  );
};

itemForm.propTypes = {
  item: PropTypes.object
};

const itemInitializedForm = reduxForm({
  form: "item"
})(itemForm);

export default connect(
  state => ({
    initialValues: state.item
  }),
  { load: currentitem }
)(itemInitializedForm);

Answer 1

React Fine Uploader 使用 Fine Uploader 的非 UI(核心)版本。这意味着 Fine Uploader 原生的所有 UI 功能都不存在，例如表单支持。如果您想通过表单向 Fine Uploader 提交文件，则需要以“ react 方式”执行此操作。这涉及传递 onSubmit功能支持您的 <form> 。这个函数应该调用event.preventDefault()以防止发布到服务器。此外，您需要使用addFiles将存在的任何表单数据发送到Fine Uploader。 API 方法(用于文件)和 setParams对于参数。 You can actually pass the non-file form data alongside the files by including those as a 2nd parameter (formatted as an object) to addFiles .

我实际上可以看到 React Fine Uploader 中添加了一个附加组件，例如 <FormUploader>为您处理所有这一切。但是，唉，我还没有创建这样的组件。