前端文件上传

介绍

在实际工作中前端相互传输文件时,前端会采用二进制,文本格式或者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;
  }
};
相关推荐
然我30 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子35 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹39 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss