reactjs - 处理来自输入文件的文件并稍后上传 react redux

Question

我对 React 和 Redux 很陌生，我(几乎)总能找到一个解决方案，但不是这个!

所以，现在，我在我的 React 应用程序的某处有一个文件输入，我可以在其中放置一个 jpg 文件，另一个文件输入可以在其中放置一个 pdf 文件。这里没有什么疯狂的。但我需要处理这些文件以便稍后上传它们，因为它就像一个多页表单......我尝试了很多东西但找不到一个有效的。

基于此:Store Input File Selected in Redux to Upload Later ，解决方案看起来太简单了，也不起作用......

我尝试处理 redux 存储中的文件(blob 路径、文件对象、文件路径...)，但没有任何效果。 Postman 的请求运行良好顺便说一下，我可以用它上传文件。

这是我做的一些代码，现在不能正常工作(请求已发送但文件路径在我的数据库中仍然为 NULL)。我使用 Symfony3 作为后端。来自商店的其他数据在我的数据库中传递，只有文件没有。

我的一个输入:

<input 
      type="file" 
      className="input-file" 
      name="flyer-pdf" 
      id="flyer-pdf"
      onChange={this.handleChangeFilePath('flyer')} 
      accept=".pdf"
/>

我更新状态的方法:

handleChangeFilePath = prop => (event) => {
    this.setState({
        // Tried event.target.files[0]
        [prop]: event.target.value,
    });
};

提交的表格:

handleSubmit = (logo, flyer) => {
   this.props.flyerSetup(logo, flyer);
};

调用 Action 的方法:

const mapDispatchToProps = (dispatch) => {
    return {
        flyerSetup: (logo, flyer) => dispatch(appActions.flyerSetup(logo, flyer))
    };
};

调用的 Action :

export const flyerSetup = (logo, flyer) => ({
    type: types.CLIENT_FLYER_SETUP,
    logo: logo,
    flyer: flyer
});

在 appReducer 中调用操作来更新 redux 存储:

case types.CLIENT_FLYER_SETUP:
        return {
            ...state,
            logo: action.logo,
            flyer: action.flyer
        };

这是我的操作:

export const createTransaction = () => (getState) => {
const state = getState();
const data = {
    logo: state.appReducer.logo,
    flyer: state.appReducer.flyer
}
console.log(data);
return transactionService.postTransaction(data)

console.log(data) 很好，我的商店很好地更新了我从输入中提供的数据，我总是得到 blob 路径/文件路径/文件对象，但正如我所说，我无法上传文件到我的服务器:(

P.s:我修改并清理了代码以帮助它更具可读性，请随时提出更多要求；)

Answer 1

找到了一个解决方法，没有意识到我一开始使用的是 superagent(我从一开始就不在这个项目上)，我的问题不是文件对象存储方法，而是我在 http 请求中的 header :

static headers (headers = {}) {
    return Object.assign({
        // The application/json header was forced at every request
        // "Content-Type": "application/json",
        "Cache-Control": "no-cache",
        "Pragma": "no-cache",
        "Expires": "-1",
        "Authorization": `Bearer ${sessionStorage.id_token}`
    }, headers);
}

我的发帖请求是这样的:

   static post (url, params, headers = {}) {
        return request
            .post(Api.prefix(url))
            .set(Api.headers(headers))
            .send(params);
    }

由于 application/json 无法发送文件数据(据我所知)，我不得不更改我上一个表单发送数据的方式。

根据 https://visionmedia.github.io/superagent/#multipart-requests ，您不能混合使用 .send 和 .attach，而且 atm 也无法做到这一点...

所以我修改了我的旧帖子请求，有很多 .field() 有点烦人，但现在似乎别无选择。至少它在工作!

static post (url, params, headers = {}) {
    if (url.match(/something/)) {
        return request
            .post(Api.prefix(url))
            .set(Api.headers(headers))
            .send(params);
    } else {
        return request
            .post(Api.prefix(url))
            .set(Api.headers(headers))
            .field('x', params.x)
            .field('x', params.x)
            .field('x', params.x)
            .field('x', params.x)
            .field('x', params.x)
            .field('x', params.x)
            .field('x', params.x)
            .field('x', params.x)
            .field('x', params.x)
            .field('x', params.x)
            .attach('logo', params.logo)
            .attach('flyer', params.flyer);
    }

此外，我只是将 File 对象发送到我的状态(然后在我的商店中，与以前一样):

handleChangeFilePath = prop => (event) => {
    this.setState({
        [prop]: event.target.files[0],
        [prop + 'Preview']: event.target.files[0]
    });
    if ([prop][0] === 'flyer') {
        this.updateNumberOfPages(event.target.files[0]);
    }
};

现在我的数据库已按我想要的方式填充，我可以在我的表格末尾上传我的文件，在我将它们发送到我的商店之后! :)