前端上传预览和下载文件

上传预览

这里是上传预览只是指选择本地图片进行预览

选择图片用的是 input[file=type]，预览有两种方案：

1、FileReader

调用 readAsDataURL 方法，将文件转为 base64，赋值给img标签；

const reader = new FileReader();
reader.readAsDataURL(file); // file为上传选择的文件
reader.onloadend = function (ev) {
  if (ev.target.readyState !== FileReader.DONE) return console.error('读取失败');
  img.src = reader.result;
};

2、URL.createObjectURL()

调用 createObjectURL 方法将文件转为对象url，同样赋值给img标签；

let { type } = file;
let blob = new Blob([file], { type });
let objectURL = window.URL.createObjectURL(blob);
window.URL.revokeObjectURL(blob);
img.src = objectURL;

下载

1、FileSaver

直接用这个库就行了：https://github.com/eligrey/FileSaver.js

2、a 标签的 download 属性

download 属性 MDN 详细说明请点击查看

兼容性查看：https://caniuse.com/download

代码基本是这样：

let link = document.createElement("a");
link.href = 'http://url';
link.download = '下载文件名称';
link.click();