Question

我有一个定义的表单：

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

submit事件的处理程序定义如下：

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

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

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

我有这样的输入类型文件：

<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 }));

使用fetch上传图像

1 个答案: