使用 chrome 扩展将图像上传到服务器

Question

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

我现在正在这样做。

这是在 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 download 的后台代码。 希望这对其他人有用。

再次感谢。

Answer 2

除了downloads.download的回调并不表示文件已经下载（只是下载排队）..

formData.append("doc", Blob, "~/Downloads/get_image.jpg");

你认为这段代码有什么作用？ Documentation，供参考。

第二个参数应该是保存文件的数据；第三个参数只是用于命名匿名数据的文件名（例如在Blob中）

相反，您传递Blob 对象本身；不是带有数据的Blob 的实例。

事实上，使用这种架构，您将无法上传文件，因为在任何时候chrome.downloads API 都不会让您访问文件的内容，并且您不能仅通过文件名访问磁盘上的文件（我认为您认为这段代码会这样做）。

要实际访问数据，您需要自己使用 XHR（或者如果您想要“现代”，则使用 Fetch API）请求它。然后，您将获得可以request to be a Blob 的响应对象。然后，您可以上传 blob 并调用 chrome.downloads 和 createObjectURL 以从扩展程序的内存中“下载”它。