反应良好的上传者不绑定表格

Question

我正在尝试包含 fine uploader in my react app using react fine uploader。我需要我的图像 dropzone 绑定到我的表单，这样当我按下提交时图像将与其他表单数据一起发送到后端。（这样我就可以正确地将任何图像分配给正确的数据库项目）。

出于某种原因，这并没有发生，fineuploader 尝试立即 POST 图片。

这是我的 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 使用 non-UI（核心）版本的 Fine Uploader。这意味着缺少 Fine Uploader 的所有 UI 原生功能，例如表单支持。如果您想通过表单向 Fine Uploader 提交文件，您需要在 "react way" 中执行此操作。这涉及将 onSubmit 函数道具传递给您的 <form>。此函数应调用 event.preventDefault() 以防止 post 到服务器。此外，您需要使用 addFiles API 方法（对于文件）和 setParams 方法（对于参数）将存在的任何表单数据发送到 Fine Uploader。 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> 可以为你处理所有这些。但是，唉，我还没有创建这样的组件。

反应良好的上传者不绑定表格

react fine uploader not binding to form

javascript

forms

fine-uploader

reactjs