JS文件操作
此系列只写我在工作中使用到的操作/代码,不是系统概括
参考:
上传
通常思路
隐藏掉很丑的
input type="file"
,在自定义的上传按钮上绑定点击事件,通过 id 调用这个 input ,然后.click()
,在这个 input 的change
事件内获取到event.target.file
做各种操作axios
let param = new FormData(); // 创建form对象 param.append('后台要你传的文件参数属性名', file, fileName); // 通过append向form对象添加数据 param.append('其他参数属性名', '其他参数数据'); // console.log(param.get('file')); // FormData私有类对象,访问不到,可以通过get判断值是否传进去 let config = { headers: {'Content-Type': 'multipart/form-data'} }; axios.post(url, param, config);
上传进度条
- 原生 Ajax 有
progress
事件 - axios 有
onUploadProgress
事件,在config
里定义
- 原生 Ajax 有
中断上传
- 原生 Ajax 有
abort
方法 - axios 有
cancelToken
属性,在config
里定义
- 原生 Ajax 有
七牛文件上传重名文件
- 七牛本身可以设置同名文件上传时的操作(上传策略 ,
scope
属性),可以设置同名而内容不一样的文件上传时是覆盖还是不允许上传. - 可以在上传时不带上文件名,使用七牛返回的 hash 值存地址,这样相同内容的文件 hash 值一致,不会重复存储,而真正的文件名可以上传成功后在自己的服务器上再保存一次
- 七牛本身可以设置同名文件上传时的操作(上传策略 ,
下载
fetch
fetch(path).then(response => { return response.blob(); }).then(blob => { let a = document.createElement('a'); let url = window.URL.createObjectURL(blob); a.href = url; a.download = name; a.click(); window.URL.revokeObjectURL(url); });
download
<a href="url" download="文件名.后缀">文字</a>
后台设置了打开即下载
window.open(`地址[?参数]`, '_parent');
预览
- 图片类
FileReader
对象 +readAsDataURL
方法- 直接在浏览器打开
document.createElement
创建 a 标签,display: none
, 设置好href
和target
,document.appendChild
,.click()
后就removeChild
window.open
方法
- 文本类
FileReader
对象 +readAsText
方法- 同上,浏览器打开
- Office文件
- 联机查看 Office 文档 ,可以直接
https://view.officeapps.live.com/op/view.aspx?src=${文件路径}
获取预览 URL ,在新页面打开
- 联机查看 Office 文档 ,可以直接