Question

我试图通过远程API通过ajax在android中发送创建的照片。我正在使用Camera Picture Background插件。

照片已正确创建，我通过ajax GET请求获取照片并将其编码为base64格式。在调试工具中，我可以通过GET请求日志查看图像本身。

接下来，我将它解析为base64到Blob并尝试将其附加到FormData：

var fd = new FormData();
fd.append('photo', blobObj);
$.ajax({
  type: 'POST',
  url: 'myUrl',
  data: fd,
  processData: false,
  contentType: false
}).done(function(resp){
  console.log(resp);
}). [...]

但是当我发送FormData时，我在调试器中看到请求中的FormData等于：{photo: null}。

顺便说一下。如果我之前尝试console.log我的blobObj，我会看到它一个blob，其大小，类型属性和切片方法 - 为什么在追加到{之后它变为null {1}}？

编辑：

FormData给出：

console.log(blobObj);

EDIT2 - 逐步代码：

我有本地图片的网址，我们假设它存储在Blob {type: "image/jpeg", size: 50778, slice: function}变量中。

首先，我获取此文件并将其解析为base64：

imagePath

Answer 1

我最近没有这样做，但这适用于我。我希望它也适合你：

function getBase64ImageByURL(url) {
  var dfd = new $.Deferred();
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      dfd.resolve(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.send();
  return dfd.promise();
}

function base64ToBlob(base64Image,toMimeType) {
  var byteCharacters = atob(base64Image.replace('data:'+toMimeType+';base64,',''));
  var byteNumbers = new Array(byteCharacters.length);
  for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  var byteArray = new Uint8Array(byteNumbers);
  var blob = new Blob([byteArray], {
    type: toMimeType
  });
  return blob;
}



var imageUrl = "https://upload.wikimedia.org/wikipedia/commons/4/49/Koala_climbing_tree.jpg";

getBase64ImageByURL(imageUrl).then(function(base64Image){
  var blob = base64ToBlob(base64Image,'image/jpeg');
  var fd = new FormData();
  fd.append('file', blob, 'my_image.jpg');
  $.ajax({
    url: 'http://your_host/uploads/testupload.php',
    data: fd,
    type: 'POST',
    contentType: false,
    processData: false,
    success:function(res){
      console.log(res);
    },
    error:function(err){
      console.log(err);
    }
  })
});

在服务器端（testupload.php）：

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        $result = move_uploaded_file($_FILES['file']['tmp_name'], $_SERVER["DOCUMENT_ROOT"].$_SERVER["BASE"].'/uploads/'.'my_image.jpg');
        var_dump("image uploaded: ".$result);
    }

?>

在 move_uploaded_file 成功将上传的图像移动到此目录之前，可能需要修改目录的某些读/写权限。

函数 getBase64ImageByURL 可能已经返回了一个blob对象，但是通过返回一个base64-image，您可以在上传它之前在html-image-tag中向用户显示该图像。

如果不需要向用户显示该图像，则还可以缩短所有步骤：

function getBlobImageByURL(url) {
  var dfd = new $.Deferred();
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    dfd.resolve(xhr.response);
  };
  xhr.open('GET', url);
  xhr.send();
  return dfd.promise();
}

getBlobImageByURL(imageUrl).then(function(imageBlob){
  var fd = new FormData();
  fd.append('file', imageBlob, 'my_image.jpg');
  console.log(fd.get('file'));// File-object 
  $.ajax({
    url: 'http://your_host/uploads/testupload.php',
    data: fd,
    type: 'POST',
    contentType: false,
    processData: false,
    success:function(res){
      console.log(res);
    },
    error:function(err){
      console.log(err);
    }
  })
});

对已修改函数的引用 base64ToBlob 和 getBase64ImageByURL

FormData中的Blob为null

1 个答案: