关于网页中文件和字符串的上传

一、单上传一个文件给后端

<input type="file" id="fileInput">
<button id="uploadBtn">Upload</button>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  document.getElementById('uploadBtn').addEventListener('click', () => {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];  // 获取文件

    const formData = new FormData();
    formData.append('file', file);  // 将文件添加到 FormData 中

    axios.post('/upload', formData)
      .then(response => {
        console.log('File uploaded successfully');
      })
      .catch(error => {
        console.error('Error:', error);
      });
  });
</script>

1、这是一个专门用来接收文件的东西，它有一个特别的属性file，上传的文件就存储在这个file里面。file是一个元组的数据类型。

2、创建一个 const formData = new FormData(); 玩意，并且将其添加到里面

3、在通过axios来进行传送

二、同时上传文件和字符串

<input type="file" id="fileInput">
<input type="text" id="textInput" placeholder="Enter some text">
<button id="uploadBtn">Upload</button>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  document.getElementById('uploadBtn').addEventListener('click', () => {
    const fileInput = document.getElementById('fileInput');
    const textInput = document.getElementById('textInput');
    
    const file = fileInput.files[0];  // 获取文件
    const text = textInput.value;  // 获取输入的字符串

    const formData = new FormData();
    formData.append('file', file);  // 将文件添加到 FormData 中
    formData.append('text', text);  // 将字符串添加到 FormData 中

    axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(response => {
      console.log('File and text uploaded successfully');
    })
    .catch(error => {
      console.error('Error:', error);
    });
  });
</script>

一样的操作