js实现文件上传

这一篇我所要说的是，通过"<input>"标签结合XMLHttpRequest把文件上传到服务端保存，并展示在页面
上的实现过程；我会大致介绍实现过程，毕竟在工作中实现大于天嘛，其他的要想细致了解需要针对性的
去照看资料；话不多上，直接上手。

第一步 创建上传点击事件

	<input ref="file" type="file" name="" style="display: none" @change="onChange" />
	
		type：属性值决定上传文件的类型
		@change: input的值变化时触发
		this.$refs.file.click():   触发弹框，让其可以选择
		选择好要上传的文件后，点击打开，于此就会触发@change事件
		

第二步 处理接收的文件

	onChange() {
		// 获取上传后的文件信息
		const file = this.$refs.file?.files[0]；
		// 获取到文件信息后，后边就是如何将文件信息上传到服务端
		// 这里说明，要根据后端接口需求进行响应的传递
		// 区别一，上传的是图片文件，后端接口需要的是base64格式的图片信息，此时需要将获取的file转成base64
		// 区别二，后端接口需要formdata格式文件，此时就要将file转成formdata格式发送给后端

		// 这里说明一下formdata格式上传
		// url 接口地址全地址
		this.uploadFile(file, url);
	}
	

第三步 处理服务端上传

	uploadFile(file, url) {
		// 处理文件转换成formData格式
		const formdata = new FormData();
		// 这里只是基本设置，对应接口需求设置响应的类型属性值
      	formdata.set('file', file);
      	formdata.set('Status', 0);

		// 接口调用
		let xml = new XMLHttpRequest();
		xml.open('POST', url， true) // 第三个值指定接口是否异步
		// 设置请求头信息
		xml.setRequestHeader(’token‘, token);
		// 监控上传进度
		xml.upload.onprogress  = this.onprogressEvent
		// 接口调用成功回调
		xml.onload = this.onloadEvent
		// 接口调用失败处理
		xml.onerror = this.onerrorEvent
	}
	onprogressEvent(e) {
		if (e.lengthComputable) {
			// 可以获取到实时的接口进度
        	this.realTimePercent = +parseInt((e.loaded / e.total) * 100);
      }
	}
	onloadEvent(e) {
		// 获取到接口调用成功后的返回数据
		const res = JSON.parse(e.currentTarget.response);
		...
	}
	onerrorEvent(e) {
		// 接口调用失败后的处理
		。。。
	}

至此，文件上传的过程就讲述完了，项目中实践还应结合项目需求做对应的调整；
建议，每一步的执行都要打印一下，看看实际获取的信息来做相应的处理。