Web文件上传完全指南：表单与JS异步请求实现

代码：

<form 
  method="post" 
  action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
>
  <input type="file" name="uploadFile" />
  <input type="text" name="userName" />
  <button type="submit">提交</button>
</form>

传递给接口的参数：

通过JS发送异步请求

使用form表单上传文件的时候有一个问题，就是页面会进行跳转，会离开我们当前的页面。而使用JavaScript发送异步请求的方式，可以完美解决这个问题。

当我们选择完一个文件，我们就可以发送一个POST请求，也就是在input[type="file"]的change事件的时候。同时，我们注意到，form表单提交其实就是发送了一个POST请求。而我们使用JavaScript发送POST请求，其实就是模拟了form表单发送一个POST请求。

最后一个小细节，我们给元素设置的enctype属性，其实最后在发送POST请求的时候，会被设置到Content-Type这个请求头中：

明确了上面的几点之后，我们的JavaScript发送异步请求的代码也就呼之欲出了：

<template>
  <form 
    method="post" 
    enctype="multipart/form-data"
    action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
  >
    <!-- 选择文件之后，执行 onFileChange 函数 -->
    <input type="file" name="uploadFile" @change="onFileChange" />
    <input type="text" name="userName" />
    <button type="submit">提交</button>
  </form>
</template>
<script setup>
import axios from 'axios'
// 选择文件之后，执行 onFileChange 函数 
function onFileChange(e) {
  // 获取到 type="file" 的 input 元素
  const target = e.target
  // 获取上传的文件
  const files = target.files
  // 如果文件存在
  if (files) {
    // 获取到上传的文件
    const uploadFile = files[0]
    console.log('uploadFile', uploadFile);
    // 定义 form data，form data 的数据结构和我们使用 form 表单提交时的数据结构一致
    const formData = new FormData()
    // 添加 uploadFile 字段，值为我们上传的文件的二进制数据
    formData.append('uploadFile', uploadFile)
    // 发送 POST 请求
    axios.post('https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', formData, {
      headers: {
        // 设置 Content-Type 为 multipart/form-data 的请求头
        'Content-Type': 'multipart/form-data'
      }
    }).then(res => {
      console.log(res)
    })
  }
}
</script>

检查一下我们之前说的几点细节：

总结

到这里，恭喜你已经掌握了文件上传的基本原理，并且对其中的各种小细节也有了认识，比如：

• 上传的图片以二进制格式传递
• multipart/form-data请求头

本文原文来自CSDN