由于公司考虑安全问题上传下载时需要赋token，基于el-upload 利用http-requst属性二次封装

文件上传(el-upload)

限制文件大小，格式，数量

坑点1：当选择上传的图片出错时，会将上一张图片删除了。

原因分析：当 beforeUpload 事件返回 false 时， element-ui 组件 upload 会自动执行一次 on-remove 事件。

解决方法：

不自定义 on-remove 事件
在 on-remove 事件中添加判断，区分已上传的图片和出错的图片
不使用 beforeUpload 事件来判断上传文件是否符合要求，
利用on-change事件，但auto-upload必须关闭，判断通过后通过submit手动上传。最终解决：before-upload(异步) 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 function(file)

beforeUpload(file) {
	return new Promise((resolve, reject) => {
		// 判断上传格式*****************
		......
		if (error) {
			this.$message.error('上传格式错误');
			 reject()
		}
                // 判断上传大小*****************
		if () {
			this.$message.error('上传图片大小不能超过 2MB!');
			 reject()
		}
		// 判断数据库里有没有，是否重新上传*****************
		var body = {
			"fileName": file.name,
			"guid": this.guid,
			"size": file.size
		}
		var dataAny = UploadCheck(body);
		dataAny.then((res, reg) => {
		//  如果res.url 存在，则不会自动上传***********
			if (res.url) {
				 reject()
			} else {
				 resolve()
			}
		})
	})
	// 返回false不会自动上传
}

原文链接：blog.csdn.net/qq_45668489…

坑点2：根据res.status状态触发on-success on-error

随笔

on-start file.status = "ready"准备上传的文件
file.raw

文件下载

使用XMLHttpRequest发送Ajax

//创建xhr对象 
var xhr = new XMLHttpRequest();
//创建一个 get 请求，采用异步
xhr.open('GET',url,true)
//设置响应返回的数据格式
xhr.responseType = 'blob'
//注册相关事件回调处理函数
xhr.onload = function(e) { 
  var response = this.response
  var reader = new FileReader()
  //response.type 服务器端返回报错为“application/json”类型
  //返回正常文件流为“application/octet-stream”类型
  根据以上逻辑分别判断
  代码省略...
  模拟a标签点击
};

XHR创建对象

AJAX创建 XMLHttpRequest对象

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX - 向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
//将请求发送到服务器。
xmlhttp.send();

AJAX - 服务器响应

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得 XML 形式的响应数据

AJAX - onreadystatechange 事件

每当 readyState 改变时，就会触发 onreadystatechange 事件。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

XMLHttpRequest().readyState五种状态 readyState 详细状态说明

(0)未初始化此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
(1)载入此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。