原生JavaScript上传文件

在做vue项目的时候，不可避免地要上传文件，有时候不想用Element-UI的组件，就搞起了原生上传，代码如下，看注释就可以了：

// 上传文件接口
export function myUploadFile(data) {
  return request({
    url: "/system/oss/upload",
    method: "post",
    data,
  });
}

// 开始上传
startUpload() {
	// 创建一个input元素
	let input = document.createElement("input");
	// 类型设为文件
	input.type = "file";
	// 选取图片点击确定的时候触发
	input.onchange = () => {
		// 这里我只是上传单个文件，所以选取第一个，多个的话可以在外面搞个循环
		let file = input.files[0];
		// 获取文件名中.最后一次出现的索引
		let index = file.name.lastIndexOf(".");
		// 获取后缀名
		let suffix = file.name.substring(index + 1);
		// 将后缀名统一转为小写，方便进行格式校验
		// 其实在安全性这块只用前端来过滤是不够的，因为可以抓包对后缀名进行修改
		if (this.picFormat.indexOf(suffix.toLowerCase()) == -1) {
			this.$message.warning("只允许上传图片");
		} else {
			// 转为二进制流，开始上传
			let blob = new FormData();
			// append的第一个参数‘file’，对应后端接收的参数名，一致即可
			blob.append("file", file);
			// 调用上传接口，把blob传过去
			myUploadFile(blob).then((res) => {
				if (res.code == 200) {
					this.$message.success("上传成功！");
					// 接收后端返回的图片ID、服务器地址（可用于预览等等）
					this.form.ossId = res.data.ossId;
					this.form.url = res.data.url;
				} else {
					this.$message.error("上传失败！");
				}
			});
		}
	};
	// 模拟点击
	input.click();
	// 移除该元素
	input.remove();
}

顺带提一下下载，后端如果返回二进制流的话，可以这么处理：

// 下载，记得要设置一下responseType
export function download(data) {
  return request({
    method:'post',
    url:`/manage/work/exportExcel`,
	responseType: 'blob',
    data
  })
}

// whichFile指的是你想下载哪个文件
download(whichFile).then((res) => {
  // 设置下载的文件名
  let fileName = 'XXXXXXXXXXX'
  // 将二进制流转成一个网络地址，用a标签指向它
  let url = window.URL.createObjectURL(res);
  let link = document.createElement("a");
  link.href = url;
  // 记得添加download属性，最后模拟点击、移除等
  link.setAttribute("download", fileName);
  link.click();
  link.remove();
})

特此记录!