在 iOS 上使用 Blob 图像的 FormData、XMLHttpRequest

Question

I'm trying to convert pasted images (blobs) in contentEditable elements to 'proper' images by uploading them.

My code for getting the images and uploading them.

function convertimages(article)
{
  images = article.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    if(images[i].src.startsWith('blob:')){

      formData = new FormData();

      fetch(images[i].src)
        .then(function(response) {
          return response.blob()
        })
        .then(function(blob) {
          formData.append("image", blob );
        });

      xmlhttp=new XMLHttpRequest();
      xmlhttp.open("POST","image.php",false);

      xmlhttp.send(formData);
      images[i].src = xmlhttp.responseText;
    }
  }
}

And my code for handling the upload:

//create unique ID for filename
$id = uniqid();
$dest = './images/kip'.$id;

if (move_uploaded_file ( $_FILES['image']['tmp_name'], $dest )){
  echo $dest;
} else {
  echo "error.jpg";
}

But when inspecting $_FILES , it is an empty array.

Answer 1

Promises..Promises

async function convertimages(article)
{
  images = article.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    if(images[i].src.startsWith('blob:')){

      formData = new FormData();

      await fetch(images[i].src)
        .then(function(response) {
          return response.blob()
        })
        .then(function(blob) {
          formData.append("image", blob );
        }).then(function(){
          xmlhttp=new XMLHttpRequest();
          xmlhttp.open("POST","image.php",false);
          xmlhttp.send(formData);
          images[i].src = xmlhttp.responseText;
    });
    }
  }
}

My first experience with them