使用laravel后端React Formik文件上传-Java 学习之路

我正在使用Formik为React中的表单 . 一切都很好但是对于文件输入 .

用户必须能够上传简历 . Formik中的确实表明输入中有一个值 . 但是当我将它发送到我的Laravel后端时，我得到一个空数组 .

我希望能够将文件存储在我的数据库中 . 任何帮助，将不胜感激 .

Formik文件输入：

<label className="btn btn-info" htmlFor="cv">
    <input id="cv" name="cv" style={{display: 'none'}} type="file" onChange={(event) => {
     setFieldValue("cv", event.currentTarget.files[0]);
                                    }} />                   
   </label>

cv输入默认值为：''

这是 Here is the console.log of it中的内容

在我的Laravel后端，我返回$ request，React正在记录它 . 这就是我所看到的 .

简历： []

Here is a picture of my console

1 回答

Formik没有't handle file upload, but there'是一个黑客围绕它提供在这里https://github.com/jaredpalmer/formik/issues/45

import * as React from 'react';

import { AxiosRequestConfig } from 'axios';
import Image from 'components/Image';
import { Progress } from 'components/Progress';
import ToasterInstance from '../Toast/ToasterInstance';
import { axios } from 'api/axios.config';
import { toApiError } from 'utils/api';

export interface MediaUploadProps {
  id: string;
  slug: string;
  value: string;
  onChange: (field: string, mediaId: string) => void;
}

export interface MediaUploadState {
  progress: number;
  file?: File;
  error?: string;
}

export class MediaUpload extends React.Component<
  MediaUploadProps,
  MediaUploadState
> {
  state: MediaUploadState = { progress: -1 };

  handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) {
      return;
    }
    let file = e.target.files[0];
    this.setState({ file: file });

    let data = new FormData();
    data.append('file', file);

    let config: AxiosRequestConfig = {
      onUploadProgress: (p: any) => {
        this.setState({ progress: Math.round(p.loaded * 100 / p.total) });
      },
    };

    this.setState({ error: undefined, progress: 0 });

    axios.post('/v1/media?slug=' + this.props.slug, data, config).then(
      res => {
        this.setState({ error: undefined, progress: -1 });
        this.props.onChange(this.props.id, res.data.path);
      },
      err => {
        const message = toApiError(err);
        this.setState({ error: message, progress: -1 });
        ToasterInstance.show({
          message,
          iconName: 'danger',
          intent: 'danger',
        });
      }
    );
  }

  handleRemoveImage = () => {
    this.props.onChange(this.props.id, '');
  }

  render() {
    return (
      <div>
        <div>
          {this.props.value !== '' &&
            this.state.progress === -1 &&
            <Image path={this.props.value} size="lg" />}
          <div style={{ maxWidth: 144 }}>
            {this.state.progress > -1 &&
              <Progress percentage={this.state.progress} />}
          </div>
          {this.props.value &&
            <a
              style={{ marginTop: -40 }}
              className="button button--negative button--small button--secondary"
              role="button"
              onClick={this.handleRemoveImage}
            >
              Remove
            </a>}
    </div>
    <div style={{ marginTop: 10 }}>
      <label className="button button--purple button--secondary">
        Upload new picture
        <input
          className="visually-hidden"
          type="file"
          onChange={this.handleFileChange}
        />

      </label>
    </div>

  </div>
);
  }
}

回复于 2024-05-06T07:43:21+08:00

使用laravel后端React Formik文件上传

1 回答

相关问题