工作中遇到的技术问题备忘(一):JS文件操作

JS文件操作

此系列只写我在工作中使用到的操作/代码,不是系统概括

参考:

HTML5 进阶系列：文件上传下载

如何用 JavaScript 下载文件

vue+axios上传文件

axios全攻略

小tips: 纯前端JS读取与解析本地文本类文件

---

上传

1. 通常思路

   隐藏掉很丑的 input type="file" ,在自定义的上传按钮上绑定点击事件,通过 id 调用这个 input ,然后 .click() ,在这个 input 的 change 事件内获取到 event.target.file 做各种操作

2. 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);

3. 上传进度条

   1. 原生 Ajax 有 progress 事件
   2. axios 有 onUploadProgress 事件,在 config 里定义

4. 中断上传

   1. 原生 Ajax 有 abort 方法
   2. axios 有 cancelToken 属性,在 config 里定义

5. 七牛文件上传重名文件

   1. 七牛本身可以设置同名文件上传时的操作(上传策略 , scope 属性),可以设置同名而内容不一样的文件上传时是覆盖还是不允许上传.
   2. 可以在上传时不带上文件名,使用七牛返回的 hash 值存地址,这样相同内容的文件 hash 值一致,不会重复存储,而真正的文件名可以上传成功后在自己的服务器上再保存一次

6. 上传前检测图片的宽高,大小

   let file = event.target.files[0];
   let reader = new FileReader();
   reader.onload = (e) => {
       let img = new Image();
       img.src = e.target.result;
       img.onload = () => {
           if (img.width >= 300 && img.height >= 300) {
               if (file.size <= Math.pow(1024, 2)) {
                   // 大小,宽高都符合要求,可以上传了
               } else {
                   // 报错提示图片最大 1M
               }
           } else {
               // 报错提示图片宽高不符合要求(300x300)
           }
       }
   }
   reader.readAsDataURL(file);

---

下载

1. 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);
   });

2. download

   <a href="url" download="文件名.后缀">文字</a>

3. 后台设置了打开即下载

   window.open(`地址[?参数]`, '_parent');

---

预览

1. 图片类
   
   1. FileReader 对象 + readAsDataURL 方法
   2. 直接在浏览器打开
      
      1. document.createElement创建 a 标签, display: none, 设置好 href 和 target , document.appendChild , .click() 后就 removeChild
      2. window.open 方法
2. 文本类
   
   1. FileReader 对象 + readAsText 方法
   2. 同上,浏览器打开
3. Office文件
   
   1. 联机查看 Office 文档 ,可以直接 https://view.officeapps.live.com/op/view.aspx?src=${文件路径} 获取预览 URL ,在新页面打开