React怎么实现文件上传

React中使用fetch实现文件上传下载

在最近的项目中需要实现文件上传下载功能，在以前spring、jsp的项目中实现文件上传很简单，但现在前后端分离，前端使用React，后端使用Spring Boot，实现就没那么方便了。

前端React使用fetch而非传统的XMLHttpRequest从后端获取Json数据，那么文件上传自然而然也要使用fetch了。

在react中使用fetch上传文件不难，代码如下：

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

handleUpload = (e) => {
e.preventDefault();
    
    let file = e.target.files[0];
    const formdata = new FormData();
    formdata.append('file', file);
        
    for (var value of formdata.values()) {
        console.log(value);
    }
    
    const url = 'http://127.0.0.1:8080/file/upload';
    fetch(url, {
        method: 'POST',
        body: formdata,
        headers: {
            "Content-Type": "multipart/form-data"
        }
    }).then(response => return response.json();)
      .catch(error => console.log(error));
};

上述实现使用了原生的fetch方法，没有做任何的封装，同时还使用了FormData对象。

在实际操作中，遇到了一个坑，在跨域请求时不能自定义头部，需要去掉headers，否则POST请求会变成OPTIONS请求。

fetch实现文件下载就要相对麻烦一些。

下载原理很简单，就是模拟a标签的点击下载，ajax 不支持下载文件功能，是因为 ajax 只能用来传输字符型数据，所以在过去无法使用 ajax 来下载文件。

fetch可以把 response 保存为 blob，下载结束后，为这个 blob 创建一个 URL，跳转到这个URL，或使用 anchor element with download property ，浏览器会弹出保存框。如果文件很大的话，还需要用到 filesystem API，因为 blob 是存在内存中的。

const params = {
    group: group,
    path: path
};
//可以根据需求传特定的一些参数
const downloadUrl = 'http://127.0.0.1:8080/file/download';
fetch(downloadUrl, {
    method: 'POST',
    body: window.JSON.stringify(params),
    credentials: 'include',
    headers: new Headers({
        'Content-Type': 'application/json'
    })
}).then((response) => {
    response.blob().then( blob => {
        let blobUrl = window.URL.createObjectURL(blob);
        //不能直接创建一个<a>标签
        // let a = document.createElement('a_id');
        let a = document.getElementById('a_id');
        //无法从返回的文件流中获取文件名
        // let filename = response.headers.get('Content-Disposition');
        let filename = 'file.txt';
        a.href = blobUrl;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(blobUrl);
    });
}).catch((error) => {
    console.log(error);
});