【前端】-【前端文件操纵与文件上传】-【前端继承后端传输文件指南】

目次

  

• 前端文件操纵与文件上传  
  
• 前端继承后端传输文件指南  
  
• 前端excel、word操纵指南  
  
• 
  
     
  
  • excel   
    
  • word   
    
    
  

前端文件操纵与文件上传

一、前端文件上传有两种思绪：

  

• 二进制blob传输：典范案例是formData传输，相当于用formData搭载二进制的blob传给后端  
  
• base64传输：转为base64传输，后端再将base64转返来。轻便、耗时
  

二、与文件相干的对象

  

• files：通过input标签读过来的文件对象，是blob的子类。  
  
• blob：不可变的二进制内容，包罗许多操纵方法，切片上传、断点续传都是基于blob的  
  
• formData：用于后端传输的对象。files是一个前端的对象，不能直接传给后端，以是我们必要一个前后端都认可的载体来通报文件，这个载体就是formData。formData就像一辆汽车用来搭载files，如许才华让文件以二进制的情势传到后端  
  
• fileReader：多用于把文件读取为某种情势（如base64、text文件）直接传给后端
  

三、file参数、blob切割文件、FileReader将文件转成base64，浓缩图/文本预览：

1. <template>
2.   <div>
3.     <input type="file" name="file" @change="fileChange" />
4.     <!-- 缩略图，文本预览 -->
5.     <img style="width:200px;" :src="imgbase64" />
6.     <button @click="submit">提交</button>
7.   </div>
8. </template>
10. <script>
11. import axios from "axios"
12. import { fstat } from "fs";
13. let _fileObj;
14. export default {
15.   name: 'HelloWorld',
16.   data() {
17.     return {
18.       imgbase64: "",
19.     }
20.   },
21.   methods: {
22.     fileChange(e) {
23.        let file = e.target.files[0]// files是个数组
24.        _fileObj = file;
25.        // file常用属性：size（大小）、type（类型）、name（文件名）
26.       if (file.size > 10 * 24 * 24) {
27.         alert("文件不能大于十兆")
28.       }
29.       if (file.type !== 'video/mp4') {
30.         alert("必须是mp4")
31.       }
32.       // 使用blob的slice方法可以切割文件
33.       let _sliceBlob = new Blob([file]).slice(0, 5000);// 切割二进制的0-5000位
34.       // 将切割后的Blob对象转成File对象（第二个参数是文件名），之后就可以上传切割后的File对象
35.       let _sliceFile = new File([_sliceBlob], "test.png");
36.       
37.       //将File对象或者Blob对象转成base64或text
38.       let fr = new FileReader();
39.       fr.readAsDataURL(_sliceFile);// readAsDataURL是转成base64的方法
40.       let self = this;
41.       fr.onload = function () {
42.         // base64是异步的转换，通过onload方法获得转换结果
43.         self.imgbase64 = fr.result// 直接将转换结果赋值给img的src，设置src的大小即可获得浓缩图
44.         console.log(fr.result)// 打印结果见下图一
45.       }
46.     },
47.     async submit() {
48.     // 这部分的代码后面讲
49.             let _formData = new FormData();
50.         _formData.append("user", "asdasd");
51.         _formData.append("file", _fileObj)
52.         axios.post("/xx", _formData);
53.     }
54.     }
55.   }
56. }
57. </script>

复制代码

四、formData：不但可以搭载文件，还可以搭载笔墨、input的其他输入

1. <form action="xxx" method="post">默认情况下提交为query参数</from>

复制代码