前端文件上传

介绍

在实际工作中前端相互传输文件时,前端会采用二进制,文本格式或者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;
  }
};
相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test6 小时前
js下载excel示例demo
前端·javascript·excel
Yaml46 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事6 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro