首页 > 其他分享 >文件上传

文件上传

时间:2024-11-30 17:22:07浏览次数:5  
标签:文件 form data formData multer 上传

# 前端部分

* 通过 form 表单 的 input 标签即可从本地选择文件,input 的 type 属性需要设置为 file

* 需要注意的是,上传文件不是一定要将header 的 Content-Type 设置为 multipart、form-data 的

* 如果后端用 express 搭建服务器,并且用 multer 中间件来处理接收到的文件的话,就不需要这项设置:headers,'Content-Type': 'multipart/form-data',

* 但是上传文件的格式,必须是formdata的。

* 同时,body中的数据需要为formData格式

 function upload(event) {
     const formData = new FormData();
     formData.append('file', event.target.files[0]);
     fetch('/upload', {
       method: 'post',
       // headers: {
       //   'Content-Type': 'multipart/form-data',
       // },
       body: formData,
       }).then(response => response.json())
       .then((data) => {
            console.log(data);
       });
}

### 注意

* formdata的append方法的第一个参数不是随便填写的,需要和后端保持一致,如下是 通过 express 的 multer 中间件处理上传文件时的情况,不一致会报错。

 

 

# 后端部分

* express 可以通过中间件 multer 来处理接收到的文件。

* https://www.npmjs.com/package/multer

fetch 

async function upload(url, formdata) {
  const ret = await fetch(url, {
    method: 'post',
    body: formdata
  })
  console.log(ret)
}

# 单类型单个文件上传

 

# 单类型多个文件上传

 

# 多类型多个文件上传

 * multer 有对上传文件限制的传参,具体的可以查阅文档。

标签:文件,form,data,formData,multer,上传
From: https://www.cnblogs.com/anch/p/18578450

相关文章

  • 为什么访问 Nginx 资源时文件会变成下载?
    为什么访问Nginx资源时文件会变成下载?在使用Nginx作为Web服务器时,偶尔会遇到一个让人困扰的问题:明明是访问图片、PDF等资源,浏览器却会把文件直接当作下载项来处理,而不是显示或渲染。这个问题不仅影响用户体验,还可能让你误以为是Nginx配置有问题。那么,究竟是什么原......
  • C/C++头文件以及避免头文件包含造成的重定义方法
    头文件是扩展名为 .h 的文件,包含了C函数声明和宏定义,被多个源文件中引用共享。有两种类型的头文件:程序员编写的头文件和编译器自带的头文件。在程序中要使用头文件,需要使用C预处理指令 #include 来引用它。前面我们已经看过 stdio.h 头文件,它是编译器自带的头文件。......
  • ‌包含头文件时,是否会优先使用环境变量取决于头文件包含的方式
    ‌包含头文件时,是否会优先使用环境变量取决于头文件包含的方式。‌在C和C++中,包含头文件的方式有两种:使用尖括号(<>)和使用双引号("")。这两种方式在查找头文件的顺序上有所不同:‌使用尖括号(<>)‌:当使用尖括号时,编译器会首先在用户通过-I选项指定的路径中查找头文件,然后是环境变......
  • 书生大模型第四期 | 基础岛 task5 XTuner 微调个人小助手认知任务(包含swanlab可视化
    目录环境配置与数据准备**步骤0.使用conda先构建一个Python-3.10的虚拟环境****步骤1.**安装XTuner验证安装修改提供的数据**步骤0.**创建一个新的文件夹用于存储微调数据**步骤1.**编辑&执行脚本**步骤3.**查看数据训练启动**步骤0.**复制模型**步骤......
  • 【新人系列】Python 入门(十四):文件操作
    ✍个人博客:https://blog.csdn.net/Newin2020?type=blog......
  • PE文件结构解析 Part4 Data Directories, Section Headers and Sections
    文章来源:https://0xrick.github.io/win-internals/pe5/目录简介DataDirectoriesSections以及SectionHeadersSectionHeaders总结简介上一篇文章中,我们讨论了NTHeaders,但是我们跳过了OptionalHeader最后的datadirectories字段。这篇文章中,我们会讨论datadirectories是......
  • Linux文件系统详解(四)
    ......
  • Linux文件系统详解(三)
    ......
  • MySQL底层概述—4.InnoDB数据文件
    大纲1.表空间文件结构(1)表空间Tablesapce(2)段Segment(3)区Extend(4)页Page(5)行Row2.Page结构(1)页结构各部分说明(2)页结构整体划分3.行记录格式(1)行格式分类(2)COMPACT行记录格式(3)Compact中的行溢出机制(4)其他行格式记录 1.表空间文件结构(1)表空间Tabl......
  • netcdf文件复制并修改
    importnumpyasnpfromnetCDF4importDatasetfromdatetimeimportdatetime#获取当前时间current_time=datetime.now()#格式化为只显示时间formatted_time=current_time.strftime("%m-%d-%H-%M-%S")defextend_list(lst,extension_count):""&......