在 require.js 模块中上传网络生成的图像

Question

我正在使用网络标记工具从网站生成图像，但是我想修改该功能，以便在完成标记后，我希望将图像上传到本地，而不是将图像下载到本地服务器。该函数位于 javascript 文件中，所有与 JS 相关的上传都与提交表单有关。没有表单和超级全局变量，我应该如何将网络生成的图像上传到服务器？

这是我目前的代码，它不在html文件中，它在js文件中。

var file_data = annotator.export();
var formData = dataURItoBlob(file_data);
var fd = new FormData(document);
fd.append("resultImage",formData);
url="upload/";
http.open("POST", url, true);

// headers
http.setRequestHeader("Content-type", "application/x-www-form-     urlencoded");
http.setRequestHeader("Content-length", fd.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
    alert(http.responseText);
 }
}

http.send(fd);

php 文件

<?php
$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

非常感谢您的帮助，谢谢。

Answer 1

dataURItoBlob(file_data); 根据函数的名称，它看起来将返回一个 blob object。 blob/file object 上传到 php 脚本时将位于 $_FILES 全局，而不是 $_POST。然后您将使用 move_uploaded_file 将其移动到您想要的目的地。

另外你似乎使用了错误的索引。您在 php 中使用 hidden_data，但在 javascript 中将名称设置为 resultImage。您需要在 php 中使用与在 javascript.

中相同的名称

所以您的 php 代码应该类似于

$upload_dir = "upload/";
$img = $_FILES['resultImage'];
if($img["error"] == UPLOAD_ERR_OK){
   //should do other sanitation like making sure the file 
   //that is uploaded is the actual type of file you expect
   $path = $upload_dir . mktime() . ".png";
   move_uploaded_file($img["tmp_name"], $path);   
}

附带说明一下，当使用 FormData object 时，您不需要像 Content-Type 那样设置请求 headers，因为它们将由 api.

在 require.js 模块中上传网络生成的图像

uploading web generated image in require.js module

javascript

php

ajax

requirejs