formdata上传多个图片文件发送给后端的同时在前端页面显示出来

好的，我理解了你的问题。你可以在前端页面使用HTML5的File API和Canvas API，将上传的图片显示在页面上。同时，使用AJAX将图片发送到后端进行处理和保存。以下是一个示例代码：

HTML代码：

<input type="file" id="fileInput" multiple>
<div id="imageList"></div>

JavaScript代码：

// 获取DOM元素
var fileInput = document.getElementById('fileInput');
var imageList = document.getElementById('imageList');
// 为文件选择框添加onchange事件监听器
fileInput.addEventListener('change', function() {
  // 获取文件列表
  var fileList = fileInput.files;
  // 遍历文件列表
  for (var i = 0; i < fileList.length; i++) {
    var file = fileList[i];
    // 使用FileReader读取文件
    var reader = new FileReader();
    reader.readAsDataURL(file);
    // 读取成功后，将图片添加到页面上
    reader.onload = function(e) {
      var img = document.createElement('img');
      img.src = e.target.result;
      imageList.appendChild(img);
      // 使用FormData上传图片
      var formData = new FormData();
      formData.append('image', file);
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/api/upload');
      xhr.send(formData);
    };
  }
});

在上传图片的同时，使用Canvas API将图片缩放或裁剪为指定尺寸，以减少后端的处理负担。具体操作可以参考Canvas API的相关文档。