【前端文件上传下载】vue前端

一、前端文件相关对象

　　Base64是一种编码格式， 将任意二进制数据转换为一个由 64 个安全字符（A-Z, a-z, 0-9, +, /, 和 = 填充符）组成的字符串。保证文件传输格式稳定，代价是增大了文件体积。

　　1、file对象

　　在前端中，对于input标签

<input type="file" @change="handleFileChange" />

　　检测事件打印file对象到控制台

    handleFileChange(event) {
      // 从事件目标中获取 FileList
      const selectedFile = event.target.files[0];

      console.log(selectedFile);
    },

　　此时可以看到控制台打印

　　size用来判断文件大小，type用来判断类型。

　　2、blob对象，不可变的二进制内容（用的不多，file对象继承blob也可以切片）

　　file对象可以随时转化成blob对象，new一个blob对象（注意第一个参数是数组）

    handleFileChange(event) {
      // 2. 从事件目标中获取 FileList
      const selectedFile = event.target.files[0];
      console.log(selectedFile);
      console.log(new Blob([selectedFile]));
    },

 

 　　blob对象可以对大小进行切片。

    handleFileChange(event) {
      // 2. 从事件目标中获取 FileList
      const selectedFile = event.target.files[0];
      console.log(selectedFile);

      let _sliceBlob = new Blob([selectedFile]).slice(0, 5000);
      console.log(_sliceBlob);
    },

 　　基于blob切片可以生成file对象，就能实现文件切片上传

　　

    handleFileChange(event) {
      // 2. 从事件目标中获取 FileList
      const selectedFile = event.target.files[0];
      console.log(selectedFile);

      let _sliceBlob = new Blob([selectedFile]).slice(0, 5000);
      let _sliceFile = new File([_sliceBlob], selectedFile.name, {
        type: selectedFile.type,
      });
      console.log(_sliceBlob);
      console.log(_sliceFile);
    },
  },

 

　　3、fileReader，把文件读取为某种形式，如Base64，text文本，以下为Base64例子

　　

    handleFileChange(event) {
      // 2. 从事件目标中获取 FileList
      const selectedFile = event.target.files[0];
      console.log(selectedFile);

      let _sliceBlob = new Blob([selectedFile]).slice(0, 5000);
      let _sliceFile = new File([_sliceBlob], selectedFile.name, {
        type: selectedFile.type,
      });
      console.log(_sliceBlob);
      console.log(_sliceFile);

      let reader = new FileReader();
      reader.readAsDataURL(_sliceFile);
      reader.onload = (e) => {
        console.log(" -- onload e -- ", e);
        console.log(" -- onload e.target.result -- ", e.target.result);
      };
    },
  },

 　　通过转化成base64，可以实现缩略图

<img :src="imgbase64" />

imgbase64: "",

    handleFileChange(event) {
      // 2. 从事件目标中获取 FileList
      const selectedFile = event.target.files[0];
      console.log(selectedFile);

      let _sliceBlob = new Blob([selectedFile]).slice(0, 5000);
      let _sliceFile = new File([_sliceBlob], selectedFile.name, {
        type: selectedFile.type,
      });
      console.log(_sliceBlob);
      console.log(_sliceFile);

      let reader = new FileReader();
      reader.readAsDataURL(selectedFile);
      reader.onload = (e) => {
        console.log(" -- onload e -- ", e);
        console.log(" -- onload e.target.result -- ", e.target.result);
        this.imgbase64 = e.target.result;
      };
    },

 

 　　同理，可以实现文本文件预览。使用fileReader的readAsText即可

　　4、formData，给后端传输的对象

　　由于file对象不能直接传递给后端，所以需要通过formData传递，Base64对象可以直接传递因为本质上是个字符串。

　　一般UI组件库或者form标签中添加类似属性即可

 　　也可直接new生成一个FormData对象

    async submit() {
      let _formData = new FormData();
      _formData.append("custom_param_01", "自定义参数01");
      _formData.append("file", _fileObject);
    },

　　将formData作为数据传递给后端即可识别file对象。

 　　（图片源自b站）

　　5、多文件上传

　　自带的功能：

<input type="file" @change="handleFileChange" multiple />

    handleFileChange(event) {
      // 2. 从事件目标中获取 FileList
      const selectedFiles = event.target.files;
      console.log(selectedFiles);
    },

 　　一般来说，用户不习惯按住ctrl多选，所以一般我们用数组接受数据

imgList: [],

    handleFileChange(event) {
      // 2. 从事件目标中获取 FileList
      if (event.target.files.length > 1) {
        const selectedFiles = event.target.files;
        this.imgList = [...this.imgList, ...selectedFiles];
      } else if (event.target.files.length == 1) {
        const selectedFiles = event.target.files[0];
        this.imgList = [...this.imgList, selectedFiles];
      }

      console.log(this.imgList);
    }

　　这样的写法兼容两种多选方式。