axios 上传文件极简示例-526互联

1. 直接从磁盘上传

<!DOCTYPE html>
<html>
<head>
  <title>文件上传示例</title>
</head>
<body>
  <h1>文件上传示例</h1>
  <form enctype="multipart/form-data">
    <input type="file" id="fileInput" multiple>
    <button type="button" onclick="uploadFiles()">上传文件</button>
  </form>
  <ul id="uploadedFilesList"></ul>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

app.js

// 定义上传文件的函数
function uploadFiles() {
  var fileInput = document.getElementById('fileInput');
  var files = fileInput.files;
  
  // 创建FormData对象，用于包装文件数据
  var formData = new FormData();
  
  // 将文件数据添加到FormData对象中
  for (var i = 0; i < files.length; i++) {
    formData.append('files', files[i]);
  }
  
  // 发送POST请求
  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(function(response) {
    // 上传成功后的处理
    console.log('上传成功', response.data);
    
    // 在页面上展示已上传的文件信息
    var uploadedFilesList = document.getElementById('uploadedFilesList');
    for (var i = 0; i < response.data.length; i++) {
      var li = document.createElement('li');
      li.textContent = response.data[i].filename;
      uploadedFilesList.appendChild(li);
    }
  })
  .catch(function(error) {
    // 上传失败后的处理
    console.error('上传失败', error);
  });
}

2. 从内存数据上传

var image1 = new File([_blob1], paperId + '_01.tif');
var image2 = new File([_blob2], paperId + '_02.tif');

// 创建FormData对象，用于包装文件数据
var formData = new FormData();
formData.append('files', image1);
formData.append('files', image2);

// 发送POST请求
axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(function(response) {
  // 上传成功后的处理
  console.log('上传成功', response.data);
})
.catch(function(error) {
  // 上传失败后的处理
  console.error('上传失败', error);
});