JS 文件上传下载

文件上传

const xhr = null;
// 文件上传
const UpladFile = () => {
	// 获取文件
	const dom = document.getElementById('file'); 
	// 设置文件上传地址
	const url = '';

	// 创建文件对象
	const form = new FormData();
	form.append('file', dom);

	// 创建ajax
	xhr = new XMLHttpRequest();
	xhr.open('post', url, true); // post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
	xhr.onload = uploadComplete; //请求完成
  xhr.onerror =  uploadFailed; //请求失败

	// 开始上传，发送form数据
	xhr.send(form); 
}

//上传成功响应
const uploadComplete = evt => {
	//服务断接收完文件返回的结果
	const data = JSON.parse(evt.target.responseText);
	if(data.success) {
		alert("上传成功！");
	}else{
		alert("上传失败！");
	}
}

//上传失败
const uploadFailed = evt => {
	alert("上传失败！");
}

//取消上传
const cancleUploadFile = () => {
	xhr.abort();
}

文件下载

后端给的是地址

// 第一种方式
let a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();

// 第二种方式
window.open(url)

// 第三种方式
window.localhost.href =  url

后端给的是文件流

请求的 responseType 设置成 arraybuffer 或者 blob，再使用URL.createObjectURL() 生产url实现查看下载

axios({
	url:"xxxxxx",
	responseType:'blob'
}).then(res =>{
	let url = URL.createObjectURL(res.data)  //  res.data 的类型要么是file，要么是blob
  // const reader = new FileReader();
  // reader.readAsDataURL(res.data);
  // preview.src = reader.result;
	let a = document.createElement('a');
	a.href = url;
	a.download = 'xxx.png';
	a.click();
	let img = document.createElement('img');
	img.src = url
})

在线查看pdf

// 第一种方式
document.getElementById('input').onchange = function(e){
	console.log(e.target.files[0])
	let URL = window.URL || window.webkitURL;
	let url = URL.createObjectURL(e.target.files[0]);
	window.open(url)
}

// 第二种方式
{/* <iframe id="viewer"> html*/}
const obj_url = window.URL.createObjectURL(blob);
const iframe = document.getElementById('viewer');
iframe.setAttribute('src', obj_url);
window.URL.revokeObjectURL(obj_url);

文档

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据]

XMLHttpRequest:对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

FormData:接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式

URL.createObjectURL():静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。