前端文件上传

介绍

在实际工作中前端相互传输文件时,前端会采用二进制,文本格式或者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;
  }
};
相关推荐
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐7 小时前
前端图像处理(一)
前端