javascript - 使用 chrome 扩展程序将图像上传到服务器

Question

我正在做一个能够从网页获取图像的 chrome 扩展程序，在我获取图像之后，我试图将它自动上传到内联网服务器，而无需用户迭代。

我现在正在做这个。

这是在 Content_script.js 上

...
x = $(frame1).contents().find("#image");
chrome.extension.sendRequest(x[0].src);
...

这是在 background.js 上

chrome.extension.onRequest.addListener(function(links) {
      chrome.downloads.download( { url: links , 
      conflictAction: "overwrite", 
      filename: "get_image.jpg" }, 
      function(DescargaId) { 
            var formData = new FormData();
            formData.append("doc", Blob, "~/Downloads/get_image.jpg");
            var request = new XMLHttpRequest();
            request.open("POST", "http://192.168.0.30/app_get_pictures/upload_img.php");
            request.setRequestHeader("Content-Type", "multipart/form-data");
            request.send(formData);
} );

这在 upload_img.php 上

 ...
 $uploaddir = $_SERVER['DOCUMENT_ROOT'].'/app_get_pictures/images/';
 $uploadfile = $uploaddir . basename($_FILES['doc']['name']);
 move_uploaded_file($_FILES['doc']['tmp_name'], $uploadfile);
 ...

至此，我已经成功将图片下载到本地机器，但无法将图片上传到服务器。

这样做是可以的，或者即使我可以直接将图片上传到服务器而不用先下载到本地机器。

注意:我在扩展解决方案的弹出页面上没有任何标记形式，我也没有弹出页面，因为正如我已经说过的，我不需要来自用户的任何迭代。

感谢您的帮助!

Answer 1

感谢https://stackoverflow.com/users/934239/xan我根据他的建议解决了这个问题，这是生成的工作代码。

    ...
    // With this I can download or get content image into var blob
    var xhr = new XMLHttpRequest();
    var kima = $(frame1).contents().find("#image");
    xhr.open('GET',kima[0].src,true);
    xhr.responseType = 'blob';

    xhr.onload = function(e) {
      if (this.status == 200) {
        var blob = new Blob([this.response], {type: 'image/png'});
        send_image(blob);
      }
    };

    xhr.send();
    ....

    // After the image is loaded into var blob, it can be send
    // to the server side
    function send_image(x){
         var formData = new FormData();
         formData.append("doc", x);

         var request = new XMLHttpRequest();
         request.open("POST", "http://192.168.0.30/app_get_image/upload_img.php");
         request.send(formData);
     }

所有这些代码都放在 chrome 扩展的 content_script 中。 此外，不再需要使用 API 下载 的后台代码。希望这对其他人有用。

再次感谢。