前端文件上传以及文件相关操作

内容来源于B站UP三十的前端课:吃透前端文件上传与文件相关操作https://www.bilibili.com/video/BV1424y1g7ma?vd_source=27ddce9d31025057ce5c593324eb65ba

一、两种方案

1. 二进制blob传输（formData传输）
2. base64传输（转为base64传输），后端要转码，传输效率慢

二、相关对象

1. files：通过input标签读过来的文件对象
2. blob：不可变的二进制内容，包含很多操作方法
3. formData:用于和后端传输的对象
4. fileReader:多用于把文件读取为某种形式，如base64，text文本

三、实现操作

1. file对象操作

   html代码

    <div class="hello">
       <img :src="imgBase64" alt="" width="200px">
       <input type="file" name="file" @change="fileChange" />
       <button @click="submit">提交</button>
     </div>

    js部分代码

   <script>
   export default {
     name: "HelloWorld",
     data() {
       return {
         // 图片base64
         imgBase64:""
       };
     },
     methods: {
       fileChange(e) {
         let file = e.target.files[0];
         console.log("上传的文件：", file);
   
         let blob = new Blob([file]);
         console.log("这是转化后的blob对象:", blob);
   
         let blobBySlice = blob.slice(0, 60000);
         console.log("这是blob切割后的对象:", blobBySlice);
         let sliceFile = new File([blobBySlice], "new.docx"); //第二个参数是文件名
   
         let fr = new FileReader();
         fr.readAsDataURL(sliceFile);
         let self = this;
         fr.onload = function () {
           self.imgBase64 = fr.result;
           console.log("这是切割后的blob对象转化为Base64数据:", fr.result);
         };
       },
       async submit() {},
     },
   };
   </script>

   控制台输出结

        2. formData操作

html代码

 <div class="hello">
    <form action="xx" method="post" enctype="multipart/form-data">
      <input type="file" name="file" @change="fileChange" />
    </form>

    <!-- <img :src="imgBase64" alt="" width="200px" />
    <input type="file" name="file" @change="fileChange" /> -->
    <button @click="submit">提交</button>
  </div>

js代码

<script>
let fileObj;
import axios from 'axios'
export default {
  name: "HelloWorld",
  data() {
    return {
      // 图片base64
      imgBase64: "",
    };
  },
  methods: {
    fileChange(e) {
      let file = e.target.files[0];
      fileObj = file
      
    },
    async submit() {
      let formData = new FormData();
      //第一个参数是名字，第二个是内容，通过Append方法加到formData里面
      formData.append('file',fileObj);
      formData.append("userName",'lg');
      axios.post('/xx',formData)
    },
  },
};
</script>

 控制台查看传输参数

四、文件对象转化关系