从输入文件处理文件并稍后上传反应redux答案

【问题标题】：Handle file from input file and upload later react redux从输入文件处理文件并稍后上传反应redux
【发布时间】：2018-07-10 18:19:39
【问题描述】：

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

调用动作的方法：

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

调用动作：

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 : 我修改并清理了代码以使其更具可读性，请随时提出更多要求 ;)

【问题讨论】：

标签： reactjs redux

【解决方案1】：

找到了一个解决方法，一开始我没有意识到我在使用超级代理（我从一开始就没有参与这个项目），我的问题不是文件对象存储方法，而是我在 http 请求中的标头：

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

现在我的数据库已按我的意愿填满，我可以在表格末尾上传我的文件，就在我将它们发送到我的商店之后！ :)

【讨论】：