关于文件上传的那些事-低调大师

关于文件上传的那些事

2021-06-15 648

阅读本文你将学会

自定义上传按钮样式
文件流方式上传文件
文件转换为bs64上传
大文件断点上传

一、文件上传的两套方案

1、基于文件流的方式上传
- 格式:multipart/form-data
- 数据格式:form-data
  - 文件流信息:file
  - 文件名字:filename
2、客户端将文件转换为BASE64上传到服务器端

二、使用文件流的方式上传文件

1、前端页面(不使用elementui自带的上传组件)
2、自定义上传按钮的原理
```
<input type="file" style="display:none;" id="file" />
<el-button type="primary" @click="uploadFile">选择上传文件</el-button>
<el-button type="warning" @click="confirmUpload">开始上传</el-button>
```
一个原始的上传文件的我们设置为隐藏状态,另外设置一个美观的按钮来做点击上传按钮,当点击上传文件按钮的时候去触发原始上传文件按钮的点击事件，这时候就可以在电脑端打开选择文件面板了，然后监听原始按钮的change事件，根据选择的文件存储到data中,点击开始上传按钮才发送ajax请求

3、前端实现上传的代码片段

import axios from 'axios';
export default {
  name: 'App',
  data () {
    return {
      currentFile: null,
    }
  },
  methods: {
    // 点击上传按钮
    uploadFile () {
      const that = this;
      const fileNode = document.getElementById('file');
      // 触发原始上传文件的点击事件
      fileNode.click();
      fileNode.addEventListener('change', function (ev) {
        that.currentFile = ev.target.files[0];
      })
    },
    // 上传前的钩子函数(根据你需求放到哪里去)
    beforeUpload (file) {
      if (!file) {
        this.$message.warning('请选择上传的文件');
        return false;
      }
      const { type, size } = file;
      // 文件格式化校验
      if (!/(png|gif|jpeg|jpg)$/i.test(type)) {
        this.$message.warning("文件合适不正确");
        return false;
      }
      // 文件大小
      if (size > 5 * 1024 * 1024) {
        this.$message.warning('文件过大,请上传小于5MB的文件');
        return false;
      }
      return true;
    },
    // 开始上传
    confirmUpload () {
      let formData = new FormData();
      const currentFile = this.currentFile;
      // 上传前的钩子函数
      const flag = this.beforeUpload(currentFile);
      if (!flag) {
        return false;
      };
      // 组装数据发送axios请求
      formData.append('file', currentFile, currentFile.name);
      // 根据后端上传文件携带其他的参数来写,不需要参数可以不写
      formData.append('title', '测试文件');
      // 设置请求头
      const headers = {
        // "Content-Type": "multipart/form-data",
      }
      // 发送ajax请求
      axios.post('/upload1', formData, { headers }).then(res => {
        this.currentFile = null;
        console.log(res);
      })
    }
  },
  components: {
  }
}

4、使用express后端接收上传文件

const express = require('express')
const bodyParser = require('body-parser')
const multiparty = require('multiparty')
const PORT = 8888
const app = express()

// 处理post请求体数据
app.use(bodyParser.urlencoded({
  extended: false,
  limit: '1024mb'
}))
app.use(bodyParser.json());

// 设置上传目录
const uploadDir = `${__dirname}/upload`

// 定义公共上传的方法
function handleMultiparty (req, res, tem = false) {
  return new Promise((resolve, reject) => {
    const options = {
      maxFieldsSize: 200 * 1024 * 1024
    }
    if (!tem) {
      options.uploadDir = uploadDir
    }
    const form = new multiparty.Form(options)
    form.parse(req, function (err, fields, files) {
      if (err) {
        res.send({
          code: 1,
          message: JSON.stringify(err)
        })
        reject(err);
        return false;
      }
      resolve({
        fields, 
        files,
      })
    })
  })
}

// 基于form-data上传数据
app.post('/upload1', async(req, res) => {
  const { files, fields} = await handleMultiparty(req, res);
  console.log(fields, 'formData中携带的参数');
  const file = files.file[0];
  res.send({
    code: 0,
    originalFilename: file.originalFilename,
    path: file.path.replace(__dirname, `http://127.0.0.1:${PORT}`)
  })
})

app.listen(PORT, () => {
  console.log(`服务已经启动,请访问localhost:${PORT}`)
})

5、前端完整代码App.vue

三、前端上传`base64`到后端

1、前端中定义将文件转换为bs64字符的方法

// 将文件转换为bs64
fileParse (file, type = "base64") {
  return new Promise(resolve => {
    let fileRead = new FileReader();
    if (type === "base64") {
      fileRead.readAsDataURL(file);
    } else if (type === "buffer") {
      fileRead.readAsArrayBuffer(file);
    }
    fileRead.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
}

2、文件上传

// 开始上传
async confirmUpload () {
  let formData = new FormData();
  const currentFile = this.currentFile;
  // 上传前的钩子函数
  const flag = this.beforeUpload(currentFile);
  if (!flag) {
    return false;
  };
  const result = await this.fileParse(currentFile, 'base64');
  const postData = {
    chunk: encodeURIComponent(result),
    filename: currentFile.name,
    title: '测试文件',
  };
  // 设置请求头
  const headers = {
    // "Content-Type": "multipart/form-data",
  }
  // 发送ajax请求
  axios.post('/upload2', postData, { headers }).then(res => {
    this.currentFile = null;
    console.log(res);
  })
},

3、后端接收前端处理的数据并将转换为Buffer存储到服务器端

const SparkMD5 = require('spark-md5');
const fs = require('fs');

// 处理当文件过大,bs64比较大的时候出现request entity too large错误
app.use(bodyParser.json({
  limit: '50mb'
}));
...
// 使用base64上传文件
app.post('/upload2', async(req, res) => {
  const {chunk, filename, title} = req.body;
  console.log(title)
  // 将前端传递过来的bs64转换为buffer
  const chunk1 = decodeURIComponent(chunk);
  const chunk2 = chunk1.replace(/^data:image\/\w+;base64,/, "");
  const chunk3 = Buffer.from(chunk2, 'base64');
  // 存储文件到服务器端
  const spark = new SparkMD5.ArrayBuffer();
  const suffix = /\.([0-9a-zA-Z]+)$/.exec(filename)[1]; // 文件的后缀名
  spark.append(chunk3);
  const path = `${uploadDir}/${spark.end()}.${suffix}`;
  fs.writeFileSync(path, chunk3);
  res.send({
    code: 0,
    originalFilename: filename,
    path: path.replace(__dirname, `http://127.0.0.1:${PORT}`)
  });
});

4、前端完整代码App2.vue

四、前端大文件断点上传

大致原理就是将大文件分割成好几个部分(根据固定数量/固定大小方式)，每个切片都有自己的数据和各自的名字，每一部分都发起一次ajax请求,将切片传递到服务器端。服务器端根据文件创建一个文件夹,用来存放大文件的切片，当客户端将全部切片传递到服务器端的时候,再发起一次请求告知服务器端,前端将数据全部传递完成了，服务器端接收到传递完成的通知的时候,将刚刚文件夹里面的文件全部合并成一个文件,最后将该文件夹删除。简短概括:大文件–>拆成很多小文件–>发起很多ajax请求发送小文件–>服务器端接收小文件–>组装成大文件

1、将大文件拆分成很多小文件来上传

...
// 根据文件内容生成唯一的hash
import SparkMD5 from "spark-md5";
...
// 开始上传
async confirmUpload () {
  let formData = new FormData();
  const currentFile = this.currentFile;
  // 上传前的钩子函数
  const flag = this.beforeUpload(currentFile);
  if (!flag) {
    return false;
  };
  const fileBuffer = await this.fileParse(currentFile, 'buffer');
  let spark = new SparkMD5.ArrayBuffer();
  spark.append(fileBuffer);
  const hash = spark.end();
  const suffix = /\.([0-9a-zA-Z]+)$/i.exec(currentFile.name)[1];
  // 将文件切割为100份来上传
  let partList = [];
  const partSize = currentFile.size / 100;
  let cur = 0;
  for (let i = 0; i < 100; i++) {
    let item = {
      chunk: currentFile.slice(cur, cur + partSize),
      filename: `${hash}_${i}.${suffix}`,
    }
    cur += partSize;
    partList.push(item);
  }
  this.partList = partList;
  this.hash = hash;
  // 发送ajax请求到服务器端
  this.sendRequest();
},

2、根据文件切片发起ajax请求

async sendRequest () {
  // 根据多少切片来创建多少请求
  let requestList = [];
  // 设置请求头
  const headers = {
    // "Content-Type": "multipart/form-data",
  }
  this.partList.forEach((item, index) => {
    const fn = () => {
      let formData = new FormData();
      formData.append('chunk', item.chunk);
      formData.append('filename', item.filename);
      // 发送ajax请求
      axios.post('/upload3', formData, { headers }).then(res => {
        const data = res.data;
        if (data.code == 0) {
          this.total += 1;
          // 传完的切片我们把它移除掉
          this.partList.splice(index, 1);
        }
      })
    }
    requestList.push(fn);
  });
  let currentIndex = 0;
  const send = async () => {
    // 如果中断上传就不在发送请求
    if (this.abort) return;
    if (currentIndex >= requestList.length) {
      // 调用上传完成的按钮,告诉后端合并文件
      this.complete();
      return;
    }
    await requestList[currentIndex]();
    currentIndex++;
    send();
  }
  send();
},

3、全部切片上传完成后通知后端上传完成

// 文件上传,需要后端合并文件
complete () {
  axios.get('/merge', {
    params: {
      hash: this.hash,
    }
  }).then(res => {
    console.log(res, '上传完成');
  })
},

4、模拟暂停与开始

// 暂停和开始
handleBtn () {
  if (this.btn) {
    //断点续传
    this.abort = false;
    this.btn = false;
    this.sendRequest();
    return;
  }
  //暂停上传
  this.btn = true;
  this.abort = true;
}

5、代码见App3.vue

五、大文件上传后端部分代码

1、接收文件切片

// 切片上传
app.post('/upload3', async (req, res) => {
  const {fields,files} = await handleMultiparty(req, res, true);
  const [chunk] = files.chunk;
  const [filename] = fields.filename;
  // 获取上传文件的hash
  const hash = /([0-9a-zA-Z]+)_\d+/.exec(filename)[1];
  const dir = `${uploadDir}/${hash}`;
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir);
  }
  const path = `${dir}/${filename}`;
  fs.access(path, async err => {
    // 如果已经存在了就不做任何处理
    if (!err) {
      res.send({
        code: 0,
        path: path.replace(__dirname, `http://127.0.0.1:${PORT}`)
      })
    }
    // 测试上传需要时间,手动延迟
    await new Promise(resolve => {
      setTimeout(() => {
        resolve();
      }, 100);
    });
    // 不存在的时候就创建
    const readStream = fs.createReadStream(chunk.path);
    const writeStream = fs.createWriteStream(path);
    readStream.pipe(writeStream);
    readStream.on('end', function() {
      fs.unlinkSync(chunk.path);
      res.send({
        code: 0,
        path: path.replace(__dirname, `http://127.0.0.1:${PORT}`)
      });
    })
  })
});

2、合并多个切片文件

// 大文件上传后
app.get('/merge',(req, res) => {
  const { hash } = req.query;
  const path = `${uploadDir}/${hash}`;
  const fileList = fs.readdirSync(path);
  let suffix = null;
  fileList.sort((a, b) => {
    const reg = /_(\d+)/;
    return reg.exec(a)[1] - reg.exec(b)[1];
  }).forEach(item => {
    !suffix ? suffix = /\.([0-9a-zA-Z]+)$/.exec(item)[1] : null;
    // 写入文件
    fs.appendFileSync(`${uploadDir}/${hash}.${suffix}`, fs.readFileSync(`${path}/${item}`));
    // 删除文件
    fs.unlinkSync(`${path}/${item}`);
  });
  fs.rmdirSync(path);
  res.send({
    code: 0,
    path: `http://127.0.0.1:${PORT}/upload/${hash}.${suffix}`
  });
})

六、代码下载

微信关注我们

原文链接：https://blog.51cto.com/u_3409716/2904763

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

iOS开发-Swift进阶之泛型!

>[**swift进阶总汇**](https://www.jianshu.com/p/c00fa675d7d5) 本文主要介绍泛型及其底层原理 ![](https://upload-images.jianshu.io/upload_images/25331915-25a53e0cdf3e70ed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 泛型泛型主要用于解决`代码的抽象能力`+`代码的复用性` 例如下面的例子，其中的T就是泛型 ``` func test (_ a: T, _ b: T)->Bool{ return a == b } //经典例子swap，使用泛型，可以满足不同类型参数的调用 func swap (_ a: inout T, _ b: inout T){ let tmp = a a = b b = tmp } ``` ### 类型约束在一个类型参数后面放置协议或者是类，例如下面的例子，要求类型`参数T遵循Equatable协议` ``` func test (_ a: T, _ ...

2021-06-15

597

一、Jmeter的介绍 Apache JMeter是Apache组织开发的基于Java的压力测试工具。用于对软件做压力测试，它最初被设计用于Web应用测试，但后来扩展到其他测试领域。我们可以用来测试接口并发问题。二、环境安装 1、先确保你的电脑上已经安装了jdk的环境 # 查看版本 java -version 2、官网下载JMETER,注意jdk的版本如果你是window系统的电脑就下载下面的zip格式的包,mac就下载下图圈住的 3、解压文件运行命令 mac电脑解压后在bin的目录下运行命令sh jmeter window系统电脑直接单击bin/jmeter.bat的文件就可以启动 4、配置中文界面三、模拟测试一个接口 1、创建线程组 2、线程组的基本配置 3、创建一个http请求（类似postman中发起一次请求） 4、配置请求信息 5、创建一个监听器(类似发起http请求后响应) 四、配置请求头 1、使用json的方法提取登录接口的token 2、在另外一个http接口中设置请求头，传递token 五、直接执行sql语句获取数据测试并发 1、下载mysql的包 2、解压下载...

2021-06-15

606

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。