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


Upload an image to server using chrome extensions

我正在做一个能够从网页获得图像的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);
 ...

这样,我已经成功地将图像下载到本地机器,但无法将图像上传到服务器。

这是可能的,或者即使我可以直接将图像上传到服务器,而不需要先将其下载到本地机器。

注意:我在扩展解决方案的弹出页面上没有任何标签表单,我也没有弹出页面,因为正如我已经说过的,我不需要用户的任何迭代

谢谢你的帮助!

多亏了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的后台代码也不再需要了。希望这对其他人也有用。

再次感谢。

此外,downloads.download的回调并不表明文件已经下载(只表明下载队列)..

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

你认为这段代码是做什么的?文档,供参考。

第二个形参应该保存文件的数据;第三个参数只是文件名,用于命名匿名数据(例如在Blob中)

相反,您传递Blob对象本身;不是Blob实例

事实上,在这种架构下,您将无法上传文件,因为没有chrome.downloads API允许您访问文件的内容,并且您不能仅通过文件名访问磁盘上的文件(这是我认为您认为这段代码会做的)。

要实际访问数据,您需要使用XHR(或Fetch API,如果您想要"现代")自己请求它。然后,您获得响应对象,您可以将其请求为Blob。然后,您可以同时上传blob 调用chrome.downloadscreateObjectURL一起从扩展的内存"下载"它。