reactjs - 使用 fetch 上传图像

Question

我定义了一个表单:

<form method="POST" onSubmit={this.handleSubmit.bind(this)} enctype="multipart/form-data">

提交事件的处理程序定义如下:

handleSubmit(event)
    {
        event.preventDefault();
        var FormData = require('form-data');
        var form = new FormData();

        form.append('nome', this.refs.name.value);
        form.append('phone', this.refs.phone.value);
        form.append('address', this.refs.address.value);
        form.append('mail', this.refs.mail.value);
        form.append('type', 'file');
        form.append('photo', this.refs.photo.value);

        const {dispatch} = this.props;
        dispatch(fetchByArray(form));
    } }

fetchByArray(表单):

export function fetchByArray(form) {
    return function(dispatch) {
        return fetch(`http://my_domain/api`, {
            method: "POST", body: form })
            .then(response => response.json())
            .then(json => dispatch(receiveByQuerystring1(json)));
    } }

如果所有参数都是字符串，则此方法有效，但如果我尝试指定一个文件，则会收到错误，因为我的 api 处理程序未获取该文件。

后端$request->file('photo')为空。我的问题可能是什么？

Answer 1

您需要阅读http://www.faqs.org/rfcs/rfc1867.html文件发送api的规则。我们对客户端文件系统相关操作有很多限制。

我将使用 React-Redux-Saga 描述它如何为我工作

1. 我有这样的输入类型文件:

<input
    type="file"
    onChange={this.onChange}
/>

和 onChange 处理程序(选择文件后立即上传)

this.props.registerFile(this.state.id, event.target.files[0]);

创建文件上传请求

const formData = new FormData();
      formData.append('file', file.get('file')); //event.target.files[0] data going here
    
      const requestOptions = {
        method: 'POST',
        body: formData,
        credentials: 'same-origin',
      };

const result = yield call(xhrRequest, requestURL, requestOptions);

function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then((response) => {
      let result = response;
      return result;
    })
    .then((data) => ({ data }))
    .catch((err) => ({ err }));