文件下载与拖拽上传

笔者在业务中碰到了需要下载示例和拖拽上传并实现进度条的功能，针对过程中遇到的问题，笔者进行了相应的总结。

需求

1. 页面中增加下载示例按钮
2. 实现一块区域能够拖拽上传word文件，限制文件大小2MB和文件类型，能显示进度条，同时支持取消上传。

文件下载

业务中要求的是示例放在静态文件夹中，并不需要请求后台。针对这种场景，笔者将介绍三种方法，分别是window.open，form表单提交以及a标签下载。笔者将通过下载img和word文档的例子，对这三种方法进行对比。

现构建dom结构如下：

<button onClick={
   this.windowOpen}>window.open</button>
<button onClick={
   this.formSubmit}>formSubmit</button>
<button onClick={
   this.aDownload}>aDownload</button>

方法一：使用window.open：

import gakkiURL from './gakki.jpg';
import wordURL from './wordURL.doc';
windowOpen = () => {
   
    window.open(gakkiURL);
    //window.open(wordURL);
}

该方法在请求两种文件时，具体表现为:

img：新开网页，然后显示对应的img图片。

word：下载该文件。

方法2：使用form表单的submit：

formSubmit = () => {
   
    let form = document.createElement('form');
    form.method = 'get';
    form.action = gakkiURL;
    //form.action = wordURL;
    //form.target = '_blank';	// form新开页面
    document.body.appendChild(form); // form表单做出提交操作要先加入到dom树中
    form.submit();
    document.body.removeChild(form);
}

该方法在请求两种文件时，具体表现为:

img：form在不设置target时，会在当前页面打开url，显示图片。

word：下载该文件。

从上述两种方法可以看出，在请求对应的url时，浏览器针对不同的MIME类型会选择不同的处理方式。在请求img、txt等格式时，浏览器会打开对应的文件，而不是下载。如果想要img这些格式也下载呢？此时就需要方法三。

方法3：使用a标签：

// 使用a标签
aDownload = () => {
   
    const a = document.createElement(