前端文件上传

介绍

在实际工作中前端相互传输文件时,前端会采用二进制,文本格式或者base64传输,要了解前端文件格式有哪些和这些格式之间怎么转换,先熟悉以下概念:

  1. files:文件对象的API,有很多对文件的操作方法,可在w3c官方文档查看

  2. Blob:不可变的二进制对象API,包含很多操作方法,和file基本有一样的操作方法

  3. FormData:用于和后端传输文件的对象,是一种采用键值对传递数据的API

  4. FileReader:多用于把文件读取为某种形式的API,如base64,txt文本

下面这张图展示文件在前端的各种格式的转换

文件上传

模板部分

javascript 复制代码
<div>
    <!-- multiple 多文件上传 -->
    <input type="file" @change="fileChange" multiple />
    <img v-if="imagebase64" :src="imagebase64" />
    <button @click="submit">提交</button>
  </div>

单文件上传

javascript 复制代码
let imagebase64 = ref();
let _fileObj = ref();```
const fileChange = (e: any) => {
  // file对象
  // console.log(e.target.files[0]);
  let file = e.target.files[0];
  _fileObj.value = file;
  if (file.slice > 10 * 24 * 24) {
    alert("文件不能大于10兆");
  }
  /*
  转换成blob对象
  new Blob([file])
  new Blob([file]).slice(0,5000) 切割文件
  blob对象切割方法slice
  */
  let _sliceBlob = new Blob([file]).slice(0, 5000);
  // 转换为file对象,需要两个参数,文件和文件名
  // let _sliceFile = new File([_sliceBlob], "test");
  let _sliceFile = new File([file], "test");
  // FileReader可以做缩略图
  let fr = new FileReader();
  // 转换为base64
  fr.readAsDataURL(_sliceFile);
  /* 文件读取时异步,需要监听onload事件 */
  fr.onload = function () {
    // fr.result 最后的结果
    // console.log(fr.result);
    // console.log(imagebase64.value);
    imagebase64.value = fr.result;
  };
};
//提交
const submit = async () => {
  let fromData = new FormData();
  // 单文件上传
  fromData.append("file", _fileObj.value);
  // 发请求
  // axios.post('/xxx',fromData)
);

多文件上传

javascript 复制代码
// 多文件上传
let fileList = ref([]);
const fileChange = (e: any) => {
  // 多文件上传
  if (e.target.files.length > 1) {
    fileList.value.push(e.target.files);
  } else {
    fileList.value.push(e.target.files[0]);
  }
};
const submit = async () => {
  let fromData = new FormData();
  // 多文件上传
  fileList.value.forEach((item) => {
    let fromData = new FormData();
    fromData.append(item.name + "file", item);
  });
    // 发请求
  // axios.post('/xxx',fromData)
}
};

切片上传

javascript 复制代码
  let _fileObj = ref();
  let precent = ref(0);
  // 切片上传
  const fileChange = (e: any) => {
  // 切片上传
  _fileObj = e.target.files[0];
};
const submit = async () => {
  // 切片上传
  // 分割文件的大小
  let size = 2 * 1024 * 1024;
  // 获取文件的总大小
  let fileSize = _fileObj.value.size;
  // 开始进度
  let current = 0;
  
  fromData.append(_fileObj.value.name, _fileObj.value.slice(current, current + size));
  while (current < fileSize) {
    await axios.post(
      "http://localhost:4000/upload",
      fromData
    );
    //百分比进度
    precent.value = Math.min((current / fileSize) * 100, 100);
    current += size;
  }
};
相关推荐
空山新雨(大队长)7 分钟前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术42 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫42 分钟前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓42 分钟前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java42 分钟前
CSS的文本样式
前端·css
前端小趴菜0543 分钟前
css - 滤镜
前端·css
祈祷苍天赐我java之术43 分钟前
理解 CSS 浮动技术
前端·css
索迪迈科技1 小时前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作1 小时前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3