前端 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);
  });
};
相关推荐
byte轻骑兵16 分钟前
【C++进阶】顺序容器
开发语言·c++
三雷科技20 分钟前
Qt的window注册表读写以及删除
开发语言·qt·注册表
TinyGBS视频流媒体24 分钟前
QT加载并显示文件夹里的图片
开发语言·qt
东方璃烟33 分钟前
Lisp语言的渗透测试
开发语言·后端·golang
阮瑭雅34 分钟前
Lisp语言的系统调用
开发语言·后端·golang
观无40 分钟前
JWT认证服务
前端·c#·vue
tangweiguo030519871 小时前
(kotlin) Android 13 高版本 图片选择、显示与裁剪功能实现
android·开发语言·kotlin
匹马夕阳1 小时前
(一)前端程序员转安卓开发分析和规划建议
android·前端
Monly211 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js
Easy_Package1 小时前
【QT】构建项目
开发语言·c++·笔记·qt