前端 JS 经典:上传文件

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

1. form 表单上传

html 复制代码
<!-- 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 上传

javascript 复制代码
// 后端上传接口
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);
  });
};
相关推荐
艾小逗43 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
董先生_ad986ad2 小时前
C# 中的 `lock` 关键字本质
开发语言·c#
元亓亓亓2 小时前
Java后端开发day36--源码解析:HashMap
java·开发语言·数据结构
道剑剑非道2 小时前
QT 打包安装程序【windeployqt.exe】报错c000007d原因:Conda巨坑
开发语言·qt·conda
小邓儿◑.◑3 小时前
C++武功秘籍 | 入门知识点
开发语言·c++
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
码银5 小时前
Java 集合:泛型、Set 集合及其实现类详解
java·开发语言