后端要求formdata传参前端该怎么处理详解

// 创建 FormData 对象
const formData = new FormData();

// 添加数据
formData.append('username', 'admin');
formData.append('password', '123456');

// 发送请求
fetch('/api/login', {
  method: 'POST',
  body: formData, // 将 FormData 作为请求体
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

<input type="file" id="avatar" />
<button onclick="uploadFile()">上传文件</button>

<script>
  function uploadFile() {
    const fileInput = document.getElementById('avatar');
    const file = fileInput.files[0]; // 获取用户选择的文件

    if (!file) {
      alert('请选择一个文件');
      return;
    }

    // 创建 FormData 对象
    const formData = new FormData();
    formData.append('file', file); // 添加文件到 FormData

    // 发送请求
    fetch('/api/upload', {
      method: 'POST',
      body: formData, // 将 FormData 作为请求体
    })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
  }
</script>

<input type="text" id="username" placeholder="用户名" />
<input type="file" id="avatar" />
<button onclick="submitForm()">提交</button>

<script>
  function submitForm() {
    const username = document.getElementById('username').value;
    const fileInput = document.getElementById('avatar');
    const file = fileInput.files[0]; // 获取用户选择的文件

    if (!username || !file) {
      alert('请填写用户名并选择文件');
      return;
    }

    // 创建 FormData 对象
    const formData = new FormData();
    formData.append('username', username); // 添加文本数据
    formData.append('avatar', file); // 添加文件数据

    // 发送请求
    fetch('/api/submit', {
      method: 'POST',
      body: formData, // 将 FormData 作为请求体
    })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
  }
</script>

const formData = new FormData();
formData.append('username', 'admin');
formData.append('avatar', file); // 假设 file 是用户选择的文件

axios.post('/api/submit', formData, {
  headers: {
    'Content-Type': 'multipart/form-data', // axios 会自动处理，这里可以省略
  },
})
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

for (let [key, value] of formData.entries()) {
  console.log(key, value);
}