🗑️Doごみ箱2.1🐾
🐙 文章 🌠 系列 📂 分类 🏷︎ 标签 🧸 友链 🍅 关于 留言
🗑️Doごみ箱2.1🐾
/img/dodola.png

一只小菜鸡的Blog

https://img.dodolalorc.cn/i/2025/03/03/67c558f57d10e.png

大文件上传和下载问题

DODOLA  发布于  更新于 ,  收录于  类别 在前端搬砖的日子里 和 系列 前端八股文基础
问题预设

网络断开之后，之前上传的部分没了？

传着传着，网络波动了，结果没有了。

关机后可不可以接着传，怎么做到？

  • 断点续传
  • 断开重连重传
  • 切片上传

步骤

  1. 前端切片 chunk 5MB
  2. 将切片传递给后端，切片要去名：hash、index
  3. 后端组合切片
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大文件上传</title>
</head>

<body>
  <input type="file" id="file" multiple>
  <button id="upload">上传</button>
</body>

<script>

  const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB


  function uploadFile() {
    const file = document.getElementById('file').files[0];
    console.log('上传文件', file.name)
    if (!file) {
      return
    }

    const totalSize = file.size
    const totalChunks = Math.ceil(totalSize / CHUNK_SIZE)
    let currentChunk = 0
    const chunks = []

    function uploadChunk() {
      console.log('上传第', currentChunk, '块')
      if (currentChunk >= totalChunks) {
        console.log('上传完成')
        return
      }
      const start = currentChunk * CHUNK_SIZE
      const end = Math.min(totalSize, start + CHUNK_SIZE)
      const chunk = file.slice(start, end)

      const formData = new FormData()
      formData.append('file', chunk)
      formData.append('index', currentChunk)
      formData.append('totalChunks', totalChunks)
      formData.append('filename', file.name)

      // fetch('/api/upload', {
      //   method: 'POST',
      //   body: formData
      // }).then(res => {
      //   if (res.ok) {
      //     currentChunk++;
      //     uploadChunk() // 递归上传下一块
      //   } else {
      //     throw new Error('上传失败')
      //   }
      // }).catch(err => {
      //   console.error(err)
      // });

      currentChunk++;
      uploadChunk() // 递归上传下一块
    };

    // 开始上传
    uploadChunk();
  };

  document.getElementById('upload').addEventListener('click', uploadFile);
</script>

</html>

上传前对文件进行压缩，减少传输的数据量。

阅读全文
 前端, 大文件上传, JavaScript
https://img.dodolalorc.cn/i/2025/03/03/67c5599367fe0.jpg

前端流量控制常用手段

DODOLA  发布于  更新于 ,  收录于  类别 在前端搬砖的日子里 和 系列 前端八股文基础
问题预设
如何解决页面请求接口的大规模并发问题？

在需要处理大规模请求的情境中，做好流量控制可以提升系统稳定性和性能。

在事件触发后，延迟执行函数，若在延迟期间再次出发，则重新计时，如在搜索框输入、调整窗口大小时。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

function debounce(fn, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            fn.apply(context, args);
        }, wait);
    }
}

const sample = function () {
    console.log("xxx");
}

window.addEventListener('resize', debounce(sample, 300));

在  debounce  函数中，timeout  变量需要满足以下条件：

阅读全文
 前端, JavaScript
https://img.dodolalorc.cn/i/2025/03/03/67c55994138f8.jpg

JavaScript 链式调用 | 设计模式 笔记

DODOLA  发布于  更新于 ,  收录于  类别 在前端搬砖的日子里 和 系列 前端八股文基础
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { createApp } from 'vue';

// 创建一个 Vue 应用实例
const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
});

// 链式调用：配置应用并绑定事件
app
  .component('MyButton', {
    template: `<button @click="handleClick">Click Me</button>`,
    methods: {
      handleClick() {
        this.$emit('custom-click');
      }
    }
  })
  .directive('highlight', {
    mounted(el) {
      el.style.backgroundColor = 'yellow';
    }
  })
  .mixin({
    created() {
      console.log('Mixin created hook');
    }
  })
  .mount('#app'); // 挂载到 DOM

createApp:创建一个 Vue 应用实例。传入一个根组件配置对象，包含 data 和 methods。

阅读全文
 前端, 链式调用, JavaScript
https://img.dodolalorc.cn/i/2025/03/03/67c55994b7733.jpg

LeetCode Hot 100记录（19/100）

DODOLA  发布于  更新于 ,  收录于  类别 在学算法的日子里 和 系列 题解记录

哈希(3/3)

给定一个整数数组  nums  和一个整数目标值  target，请你在该数组中找出  和为目标值 target  的那  两个  整数，并返回它们的数组下标。

你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。

阅读全文
 算法, LeetCode
https://img.dodolalorc.cn/i/2025/03/03/67c559ab9df13.jpg

Rust编程区块链项目 BlockChain in Rust

DODOLA  发布于  更新于 ,  收录于  类别 Rust 低手的垃圾桶 和 系列 Rust 学习中
GitHub仓库地址
GitHub 仓库地址：BlockChain

实现一个轻量的简单高效的区块链系统项目，用于学习和研究。

  • 学习区块链的相关知识，实现一个由 Rust 实现的简单区块链系统。
  • 能够生成创世区块，支持区块的创建、验证和链式储存，实现工作量证明算法。
  • 利用本机端口构建服务系统，实现交易的广播、挖矿功能、简单的交易校验功能。
  • 用户可以通过命令行启动本地服务，在main.rs中配置路由，参考下方的使用手册，进行创建交易、挖矿、查看信息等。
  • 通过时间戳、lock_time、签名校验等完成简单的对交易信息的核对。
  • 系统具有一定的可扩展性，用户可以通过调整 API 接口快速调试。

本产品主要由src/下的.rs文件实现主要功能。

阅读全文
 Rust, 区块链
https://img.dodolalorc.cn/i/2025/03/02/67c461f0d8665.jpg

2025牛客暑寒假多校训练营Day4

DODOLA  发布于  更新于 ,  收录于  类别 在学算法的日子里 和 系列 题解记录

定义字符串是平衡的：字符串中01的连续子串的数量和10的连续子串的数量相同。

定义字符串s的val(s)：

  • 将字符串s的某位置i的字符倒置（1变成0，0变成1）后，字符串是平衡的，这样的位置的总数

现在有一个由1、0和?组成的字符串，?可以任意换成1或0，求所有的填写完成的字符串的val(s)的总和，模数是$10^9+7$。

阅读全文
 2025寒假训练, 算法, 牛客