vue 实现文本的拖拽_前端实现文件下载和拖拽上传

需求

页面中增加下载示例按钮

实现一块区域能够拖拽上传word文件，限制文件大小2MB和文件类型，能显示进度条，同时支持取消上传。

文件下载

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

现构建dom结构如下：

window.open

formSubmit

aDownload

方法一：使用 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 = () =>