Question

我正在尝试使用fine uploader在我的反应应用中加入react fine uploader。我需要我的图像dropzone绑定到我的表单，以便当我按其他表单数据提交时，图像将被发送到后端。（这样我就可以正确地将任何图像分配给正确的数据库项目）。

出于某种原因，这种情况并没有发生，并且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提交文件，您需要按照＃34;做出反应的方式＃34;。这涉及将onSubmit函数道具传递给您的<form>。此函数应调用event.preventDefault()以阻止发布到服务器。此外，您需要使用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>，可以为您处理所有这些。但是，唉，我还没有创建这样的组件。

反应精细上传者没有约束形成

1 个答案: