首页 > 其他分享 >大文件分片上传前后端实现

大文件分片上传前后端实现

时间:2023-05-08 15:14:49浏览次数:32  
标签:文件 const res value file 分片 uploadSize 上传 size

1.前端代码

<template>
  <div class="upload_container">
    <el-progress :percentage="progressNum" />
    <input type="file" ref="file" @change="selectFile" />
    <el-button type="primary" @click="uploadFile">上传文件</el-button>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";

const file = ref(null); //
const selectFileobj = ref(null); //用来保存选择的文件
const progressNum = ref(0); //进度条
const chunk_size = ref(10 * 1024 * 1024); //分片大小为10M
const uploadSize = ref(0); //已上传的文件大小

//选择文件
const selectFile = () => {
  console.log(file.value?.files); //获取到文件对象
  if (file.value?.files[0]) {
    selectFileobj.value = file.value?.files[0];
  }
};

//上传文件
const uploadFile = async () => {
  if (selectFileobj.value) {
    console.log("selectFileobj: ", selectFileobj.value);
    const { name, size, type } = selectFileobj.value;

    while (uploadSize.value < size) {
     
      //已上传的文件大小小于时
      const fileChunk = selectFileobj.value?.slice(
        uploadSize.value,
        uploadSize.value + chunk_size.value
      );
      console.log("fileChunk: ", fileChunk); //得到每次切片好的文件

      const fd = new FormData();
      fd.append("name", name);
      fd.append("type", type);
      fd.append("size", size);
      fd.append("uploadSize", uploadSize.value);
      fd.append("file", fileChunk);

      const res = await axios.post("http://localhost:8000/upload_file", fd);
      console.log("res:上传文件 ", res);
      uploadSize.value += fileChunk.size;
      progressNum.value = (uploadSize.value / size).toFixed(2) * 100   //进度条控制
    }
  } else {
    ElMessage({
      message: "请选择文件",
      type: "warning",
    });
  }
};
</script>

<style scoped>
.upload_container {
  width: 200px;
  text-align: left;
}
</style>

2.后端node.js

var express = require("express");
const bodyParser = require("body-parser");
const uploader = require("express-fileupload"); //express-fileupload插件
const { extname, resolve } = require("path");
const { existsSync, appendFileSync, writeFileSync } = require("fs"); //文件读写

// 实例化express
var app = express();

//配置bodyparser 解析的作用  固定写法
app.use(bodyParser.json()); //解析json
app.use(bodyParser.urlencoded()); //解析表单数据
app.use(uploader()); //此中间件是为了拿到前端传的文件类型的数据
app.use("/", express.static("file"));

//跨越处理
app.all("*", (req, res, next) => {
  res.header("Access-Control-Allow-origin", "*");
  res.header("Access-Control-Allow-Methods", "POST,GET");
  next();
});

app.post("/upload_file", (req, res) => {
  // console.log("req: ", req);
  // 获取前端上传的参数
  const { name, type, size, uploadSize } = req.body;
  const { file } = req.files; //文件

  const filePath = resolve(__dirname, "./file/" + name); //拼接路径
  if (uploadSize !== "0") {
    if (!existsSync(filePath)) {
      res.send({
        code: 400,
        message: "no file exists",
      });
      return;
    }

    //写文件
    appendFileSync(filePath, file.data);
    res.send({
      code: 200,
      message: "padding",
      data: {
        videoUrl: "http://localhost:8000/" + name,   //将url返回给前端展示
      },
    });
  } else {
    writeFileSync(filePath, file.data); //创建并开始写文件
    res.send({
      code: 200,
      message: "file is created",
    });
  }
});

app.listen(8000, function () {
  console.log("服务已启动,端口8000");
});

标签:文件,const,res,value,file,分片,uploadSize,上传,size
From: https://www.cnblogs.com/shun1015/p/17381789.html

相关文章

  • Linux基础19 Gdisk, 挂载命令mount与配置文件, fstab文件的详细信息, Swap介绍与案例,
    gdiskgdisk分区,分区表是GPT,支持更大的容量分区。128个。#需要安装[root@oldboy~]#yuminstall-ygdisk 1.添加硬盘,3TB在vmware里面添加2.查看是否能识别出来。[root@oldboy~]#lsblkNAMEMAJ:MINRMSIZEROTYPEMOUNTPOINTsda8:0050G0disk......
  • vue3 证件识别上传组件封装
    证件图片识别上传根据业务需要,经常涉及到证件上传,例如身份证上传、银行卡、营业执照等信息,根据设计师的设计,单独封装了一个上传组件。识别接口后端用的是阿里云的。上传组件用的是element-plusel-upload上代码:<template><divclass="component-upload-image"><el-up......
  • Linux下面误删除文件使用extundelete工具恢复介绍
    操作系统版本:CentOSrelease6.4(Final)   软件版本:extundelete-0.2.4.tar.bz2PS:该软件恢复文件系统仅支持ext2/ext3/ext41.创建文件系统[root@zw_test_26_74/]# mkfs-text4/dev/sdb32.查看文件系统类型[root@zw_test_26_74/]#blkid/dev/sdb3 --查看文件系......
  • Linux下面误删除文件使用extundelete工具恢复介绍
    1.使用rz命令上传extundelete-0.2.4.tar.bz2到/tmp文件夹下并解压软件。1[root@localhosttmp]#tar-jxvfextundelete-0.2.4.tar.bz22.进入到extundelete解压的目录下面,执行编译安装。1234567891011[root@localhost test]#cd/tmp[r......
  • 用户、组相关配置文件字段的含义
    1./etc/passwdroot@root:~#cat/etc/passwdroot:x:0:0:root:/root:/bin/bashdaemon:x:1:1:daemon:/usr/sbin:/usr/sbin/nologinbin:x:2:2:bin:/bin:/usr/sbin/nologinadmin:x:3:3:admin:/dev:/usr/sbin/nologin字段与字段之间以:隔开,每个字段代表的意思如下:1.用户名。2.......
  • linux环境部署--MySQL5.7二进制源码文件安装
    linux环境部署--MySQL5.7二进制源码文件安装mysql-5.7.11-Linux-glibc2.5-x86_64.tar提取码:1999MySQL5.7卸载1、将安装包解压到/usr/local/sudotarzxvfmysql-5.7.11-Linux-glibc2.5-x86_64.tar.gz-C/usr/local/2、解压后为了方便后面操作可把解压后文件名修改为mysql......
  • 【python】http.server搭建局域网文件传输
    1、起因  因为测试需要向平板传输apk安装文件,插数据线比较麻烦,同一局域网起个服务方便又快捷,速度也快,linux下类似 2、官网文档  python3.11  https://docs.python.org/3/library/http.server.html  python2.7(自行了解)  https://docs.python.org/2.7/......
  • 文件系统 fdatasync fsync sync 详解
    一、Buffer和Cache简介 数据写入内存空间,这段空间就是缓冲区buffer,写入缓冲区把数据从内存空间读出,这段空间就是缓存器cache,读取缓存区  1、cacheCache:缓存区,是高速缓存,是位于CPU和主内存之间的容量较小但速度很快的存储器。 Cache并不是缓存文件的,而是缓存块的(块......
  • 在cmd中运行javac编译java文件报错: 编码GBK的不可映射字符、 非法字符: \65279
    操作背景:我在eclipse建立了个HelloWorld.java文件,格式UTF-8,然后复制保存到C:\Users\alex\test目录下,在此处运行按住Shift+右键调出cmd命令窗口,输入命令:javac HelloWorld.java,然后报错:HelloWorld.java:6:错误:编码GBK的不可映射字符解决办法:方法一:带上编码utf-8,运行命令:javac-e......
  • [20230508]crack oracle执行文件.txt
    [20230508]crackoracle执行文件.txt--//昨天看了链接:https://www.xifenfei.com/2023/04/ora-07445-kglsget.html--//提到open阶段执行如下:-----CurrentSQLStatementforthissession(sql_id=gtf6tgc2ycgxx)-----selectcount(*)fromXDB.XDB$SCHEMAswheres.xmldata.s......