前端 JS 经典:上传文件

news2024/12/23 23:38:29

重点:multipart/form-data 后端识别上传类型必填

1. form 表单上传

<!-- enctype="multipart/form-data" 这个必填 -->
<form 
    action="http://127.0.0.1:8080/users/avatar" 
    method="post" 
    enctype="multipart/form-data"
>
  <input name="name" type="text" />
  <input id="file" name="files" type="file" />
  <button>提交</button>
</form>
<script>
  const upload = document.getElementById("file");
  upload.onchange = function (value) {
    const fileList = value.target.files;
    console.log(fileList);
  };
</script>

2. js 上传

// 后端上传接口
function updateAvatar(data) {
  return api({
    url: "/users/avatar",
    method: "post",
    // 设置请求头(重点)
    headers: {
      "Content-Type": "multipart/form-data",
    },
    data,
  });
}

let cutDown = (data) => {
  // 构建 form 表单;
  let formData = new FormData();
  let { file } = data;
  console.log(data);
  // file 参数命名和后端一致
  formData.append("file", file);
  updateAvatar(formData).then((res) => {
    console.log(res);
  });
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/982544.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue框架--Vue条件渲染

这里重点讲述Vue提供的两个指令:v-show和v-if(v-else-if/v-else)。

C 风格文件输入/输出 (std::fflush)(std::fwide)(std::setbuf)(std::setvbuf)

文件访问 将输出流与实际文件同步 std::fflush int fflush( std::FILE* stream ); 对于输出流&#xff08;和最近操作为输出的更新流&#xff09;&#xff0c;将来自 stream 缓冲区的未写入数据写入关联的输出设备。 对于输入流&#xff08;和最近操作为输入的更新流&…

实在智能牵手埃林哲,“TARS-RPA-Agent+云时通”双剑合璧共推企业数字化转型

近日&#xff0c;《数字中国建设整体布局规划》进一步明确了数字化发展的方向和节奏&#xff0c;对企业数字化建设提出了新要求。回看过去几十年&#xff0c;信息化建设如火如荼&#xff0c;各类IT系统如雨后春笋般涌现&#xff0c;系统的自动化操作及系统间数据交互共享等需求…

std::make_shared和new初始化智能指针的区别

先看代码&#xff1a; class Base {public:Base(int num):a(num) {std::cout << "Base() construct" << std::endl;}~Base() {std::cout << "Base() deconstruct" << std::endl;}int Get() {return a;}private:int a; };void tes…

微信小程序的高校教室自习室占座预约系统java+uniapp

教室预约系统的系统项目的概述设计分析&#xff0c;主要内容有平台的具体分析&#xff0c;进行数据库的是设计&#xff0c;数据采用mysql数据库&#xff0c;并且对于系统的设计采用比较人性化的操作设计&#xff0c;对于系统出现的错误信息可以及时做出处理及反馈。 基于教室预…

Java 复习笔记 - 面向对象进阶篇

文章目录 一&#xff0c;Static&#xff08;一&#xff09;Static的概述&#xff08;二&#xff09;静态变量&#xff08;三&#xff09;静态方法&#xff08;四&#xff09;工具类&#xff08;五&#xff09;static的注意事项 二&#xff0c;继承&#xff08;一&#xff09;继…

电脑黑屏只有鼠标箭头?4个正确处理方法记得收藏!

“我刚刚在用电脑办公呢&#xff0c;突然之间电脑就黑屏了&#xff0c;只剩下一个鼠标箭头。这是什么原因引起的呢&#xff1f;怎么解决电脑黑屏的问题呀&#xff1f;求解答&#xff01;” 不知道朋友们有没有遇到过在使用电脑时&#xff0c;突然电脑就黑屏了并且只剩下鼠标箭头…

CMS 三色标记【JVM调优】

文章目录 1. 垃圾回收器2. CMS 原理3. 三色标记算法 1. 垃圾回收器 ① Serial&#xff1a;最原始的垃圾回收器&#xff0c;用于新生代&#xff0c;是单线程的&#xff0c;GC 时需要停止其它所有的工作&#xff0c;算法简单&#xff0c;但它只能在内存较小时勉强使用&#xff1b…

光栅和矢量图像处理:Graphics Mill 11.4.1 Crack

Graphics Mill 是适用于 .NET 和 ASP.NET 开发人员的最强大的成像工具集。它允许用户轻松向 .NET 应用程序添加复杂的光栅和矢量图像处理功能。 光栅图形 加载和保存 JPEG、PNG 和另外 8 种图像格式 调整大小、裁剪、自动修复、色度键和 30 多种其他图像操作 可处理任何尺寸&am…

C语言深入理解指针(非常详细)(四)

目录 字符指针变量数组指针变量数组指针变量是什么数组指针变量怎么初始化 二维数组传参的本质函数指针变量函数指针变量的创建函数指针变量的使用代码typedef关键字 函数指针数组转移表 字符指针变量 字符指针在之前我们有提到过&#xff0c;&#xff08;字符&#xff09;&am…

ABB MPRC086444-005数字输入模块

ABB MPRC086444-005 是一款数字输入模块&#xff0c;通常用于工业自动化和控制系统中&#xff0c;用于接收和处理数字信号。以下是这种类型的数字输入模块通常可能具备的一般功能和特点&#xff1a; 数字输入接口&#xff1a;MPRC086444-005 模块通常配备多个数字输入通道&…

Android扫码连接WIFI实现

0&#xff0c;目标 APP中实现扫WIFI分享码自动连接WIFI功能 1&#xff0c;前提条件 设备需要有个扫码器&#xff08;摄像头拍照识别也行&#xff09;&#xff0c;APP调用扫码器读取WIFI连接分享码。 2&#xff0c;增加权限 在AndroidManifest.xml中增加权限 <uses-permissi…

PyTorch深度学习实战(14)——类激活图

PyTorch深度学习实战&#xff08;14&#xff09;——类激活图 0. 前言1. 类激活图1.1 基本概念1.2 类激活图生成 2 数据集分析3 使用 PyTorch 生成 CAM小结系列链接 0. 前言 我们已经能够构建性能优异的神经网络模型&#xff0c;但对我们而言&#xff0c;卷积神经网络的决策过…

嵌入式Linux驱动开发(LCD屏幕专题)(一)

一、LCD简介 总的分辨率是 yres*xres。 1.1、像素颜色的表示 以下三种方式表示颜色 1.2、如何将颜色数据发送给屏幕 每个屏幕都有一个内存&#xff08;framebuffer&#xff09;如下图&#xff0c;内存中每块数据对用屏幕上的一个像素点&#xff0c;设置好LCD后&#xff…

西门子PLC与三菱PLC之间能否实现无线MODUBS通讯

对一个大型工厂&#xff0c;由于生产线的不断改造、新老流程的不断更新&#xff0c;这些PLC系统往往是由不同的制造商提供的。那么在智慧工厂的实现中&#xff0c;常会遇到不同品牌PLC之间需要进行相互通讯的情况。由于场地和生产能效的原因&#xff0c;在后期的系统改造中&…

提升效率:PostgreSQL准确且快速的数据对比方法

作为一款强大而广受欢迎的开源关系型数据库管理系统&#xff0c;PostgreSQL 在数据库领域拥有显著的市场份额。其出色的可扩展性、稳定性使其成为众多企业和项目的首选数据库。而在很多场景下&#xff08;开发|生产环境同步、备份恢复验证、数据迁移、数据合并等&#xff09;&a…

基于Python开发的学生信息管理系统控制台程序(源码+可执行程序exe文件+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python开发的学生信息管理系统控制台程序&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都…

《2023人工智能发展白皮书》发布(118页)

导读 本白皮书由七大部分组成。第一章人工智能产业链分析&#xff0c;描绘人工智能产业链全景图&#xff0c;并对产业链各环节进行深入分析;第二章人工智能行业环境&#xff0c;明确中国人工智能行业生命周期和竞争结构;第三章人工智能发展概况&#xff0c;阐述国内外人工智能…

4.3.3 【MySQL】Redundant行格式

现在我们把表demo 的行格式修改为 Redundant &#xff1a; 为了方便大家理解和节省篇幅&#xff0c;我们直接把表 demo 在Redundant 行格式下的两条记录的真实存储数据提供出来&#xff0c;之后我们着重分析两种行格式的不同即可。 下边我们从各个方面看一下 Redundant 行格式有…

十二、集合(4)

本章概要 集合 Set映射 Map队列 Queue 优先级队列 PriorityQueue 集合与迭代器 集合Set Set 不保存重复的元素。 如果试图将相同对象的多个实例添加到 Set 中&#xff0c;那么它会阻止这种重复行为。 Set 最常见的用途是测试归属性&#xff0c;可以很轻松地询问某个对象是否…