【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】

前端文件操作与文件上传

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

1. 二进制blob传输：典型案例是formData传输，相当于用formData搭载二进制的blob传给后端
2. base64传输：转为base64传输，后端再将base64转回来。简便、耗时

二、与文件相关的对象

1. files：通过input标签读过来的文件对象，是blob的子类。
2. blob：不可变的二进制内容，包含很多操作方法，切片上传、断点续传都是基于blob的
3. formData：用于后端传输的对象。files是一个前端的对象，不能直接传给后端，所以我们需要一个前后端都认可的载体来传递文件，这个载体就是formData。formData就像一辆汽车用来搭载files，这样才能让文件以二进制的形式传到后端
4. fileReader：多用于把文件读取为某种形式（如base64、text文件）直接传给后端

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

<template>
  <div>
    <input type="file" name="file" @change="fileChange" />
    
    <img style="width:200px;" :src="imgbase64" />
    <button @click="submit">提交button>
  div>
template>

<script>
import axios from "axios"
import {
      fstat } from "fs";
let _fileObj;
export default {
     
  name: 'HelloWorld',
  data() {
     
    return {
     
      imgbase64: "",
    }
  },
  methods: {
     
    fileChange(e) {
     
       let file = e.target.files[0]// files是个数组
       _fileObj = file;
       // file常用属性：size（大小）、type（类型）、name（文件名）
      if (file.size > 10 * 24 * 24) {
     
        alert("文件不能大于十兆")
      }
      if (file.type !== 'video/mp4') {
     
        alert("必须是mp4")
      }
      // 使用blob的slice方法可以切割文件
      let _sliceBlob = new Blob([file]).slice(0, 5000);// 切割二进制的0-5000位
      // 将切割后的Blob对象转成File对象（第二个参数是文件名），之后就可以上传切割后的File对象
      let _sliceFile = new File([_sliceBlob], "test.png");
      
      //将File对象或者Blob对象转成base64或text
      let fr = new FileReader();
      fr.readAsDataURL(_sliceFile);// readAsDataURL是转成base64的方法
      let self = this;
      fr.onload = function () {
     
        // base64是异步的转换，通过onload方法获得转换结果
        self.imgbase64 = fr.result// 直接将转换结果赋值给img的src，设置src的大小即可获得浓缩图
        console.log(fr.result)// 打印结果见下图一
      }
    },
    async submit() {
     
    // 这部分的代码后面讲
    	let _formData = new FormData();
        _formData.append("user", "asdasd");
        _formData.append("file", _fileObj)
        axios.post("/xx", _formData);
    }
    }
  }
}
script>

四、formData：不仅可以搭载文件，还可以搭载文字、input的其他输入

<form action="xxx" method="post">默认情况下提交为query参数from>
<form action="xxx" method="post" enctype="multipart/form-data">enctype指定提交为formDatafrom>

五、文件上传：将blob转成FormData上传

async submit() {