【vue2】前端文件上传与下载原理与使用

原理与实例

前提：文件的传输是数据流形式；

文件上传原理：form形式、ajax/axios请求+FormData实例形式
获取文件数据File对象，上传文件必须设置multipart/form-data形式(两种方法：1、通过form标签的enctype；2、通过请求头设置：Content-Type:'multipart/form-data')；

• 【如果是通过form表单的action请求】：通过内部input标签传参并提交；
• 【如果是通过ajax/axios等非form表单形式】：通过new FormData()实例的formData.append('file',file)；等方式形成请求参数，最后将参数通过ajax/axios请求发送；响应数据为获取成功。

补充

• form标签：<form action="" method="post" enctype="multipart/form-data"></form>

• Input标签：<input type="file" name="file" multiple="multiple" />，这个输入框在上传时的值是File对象（multiple：支持多文件）；
  

  • 第三方封装组件：如iview的Upload 上传；就是对原生input的封装；

---

文件下载原理：form方式、ajax/axios请求+手动创建dom形式

思路：

• 方式一：正常使用form标签；或者手动创建form元素、内部input元素传参，最后调用document.createElement('form').submit()；
• 方式二：通过ajax/axios请求获取后端传来的文件地址（二进制数据要转Blob，怎么转：请求时配置响应类型responseType:‘blob’，通过let blob=new Blob(res，type:res.type)。然后通过URL.createObjectURL(blob)获取文件url），手动创建a标签利用download属性来下载；

• a标签：download属性
• Blob：MDN地址
• ArrayBuffer：MDN地址

3.用哪一种形式下载，取决于后端返回filekey还是文件流。