无法使用 Redux Form 发送文件

Question

我正在为我创建一个网页，并且正在使用 Redux/Redux Form。 我的后端工作正常，但我不知道如何在我的前端工作。 我没有使用任何库来获取前面的图像，我只是复制并粘贴了一个 FieldFileInput，它工作正常。

这是我的 PostForm.tsx：

    renderInput = ({input, label, meta}: {input: any, label: any, meta: any}) => {
        const className = `field ${meta.error && meta.touched} ? 'error' : ''`;
        return (
            <div className={className}>
                <label>{label}</label>
                <div className="input-group input-group-lg">
                    <input className="form-control"{...input} autoComplete="off"/>
                </div>
                {this.renderError(meta)}
            </div>
        )
    };

    onSubmit = (formValues: any) => {
        //@ts-ignore
        this.props.onSubmit(formValues)
    };

    render() {
        return (
            <form
                onSubmit={ this.props.handleSubmit(this.onSubmit)}
                className="ui form error"
            >
                <div className="create-post-field-two">
                    <Field
                        name="title"
                        component={this.renderInput}
                        label="Enter Title"
                    />
                </div>
                <div className="create-post-field-two">
                    <Field
                        name="body"
                        component={this.renderInput}
                        label="Enter Description"
                    />
                </div>

                <div className="create-post-field-two">
                    <Field
                        name="imageUrl"
                        component={FieldFileInput}
                        label="Enter Image"
                    />
                </div>

                <div className="postButton">
                    <button className="btn btn-outline-secondary">Submit</button>
                </div>
            </form>
        )
    }
}

在此页面中，我确信一切正常，因为我在我的操作中收到了所有数据。

这是我的 Redux 操作

export const createPost = ( formValues: any) => async(dispatch: any, getState: any) => {
  const { userId } = getState().auth;
  let token = userId

 const headers = {
    // 'Content-Type': 'multipart/form-data',
    authorization: `Bearer ${token}`,
 };
  let formData = new FormData();
  formData.append('imageUrl', formValues.imageUrl);

  try {

    const response = await AlleSys.post('/posts', {...formValues, image: formData}, {headers})
    dispatch({type: CREATE_POST, payload: response.data})
    history.push('/')
  }catch (err) {
    console.log("ERROR: Couldn't post for identified user");
  }
};

如果我取消注释 Content-Type，我会收到错误Error: Multipart: Boundary not found in my Back-End。 这是我使用失眠的请求的屏幕截图。

我被困了好几天，我不知道如何在前端实现文件上传。 请不要介意打字，我稍后会更正。

Answer 1

我在 Redux Action 中的表单字段中使用了 bodyFormData.append，效果非常好。

export const createPost = ( formValues: any) => async(dispatch: any, getState: any) => {
  const { userId } = getState().auth;
  let token = userId

 const headers = {
    authorization: `Bearer ${token}`,
     Accept: 'application/json',
 };

  const { title, body, image } = formValues;

  const bodyFormData = new FormData();
  bodyFormData.append('title', title);
  bodyFormData.append('body', body);
  bodyFormData.append('image', image);
  
  try {
    const response = await AlleSys.post('/posts', bodyFormData, {headers})
    console.log(response)
    dispatch({type: CREATE_POST, payload: response.data})
    history.push('/')