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

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

我正在这样做。

这是Content_script.js

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

这是对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); 
...

有了这个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); 
});

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

可以这样做，或者即使我可以直接将图像上传到服务器，而无需先将它首先下载到本地机器。

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

感谢您的帮助！

来源

2016-11-02 Alejandro Vargas

尝试直接将图像转换为Blob，示例应该易于使用，您需要在manifest.json的权限中有''''。 – wOxxOm

在大多数情况下，那岂不是更有效的图像URL发送到服务器，让服务器获取图像本身？ – Makyen

除了事实的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一起上传到您的分机内存中。

来源

2016-11-02 11:12:51 Xan

感谢您的意见，而且还我股票这个东西。如果我没看错你的解释，API不给我访问文件的内容，那么唯一的办法就是使用XHR要上传的文件,,但我在哪里可以把XHR，在内容脚本或背景脚本？，再次感谢。 –

_“但是，我可以在哪里将XHR放入内容脚本或后台脚本中？_从XHR的角度来看 - 无关紧要，因为内容和后台脚本具有相同的访问级别。但要调用'downloads' API，它不能是内容脚本。 – Xan

似乎是不可能的。因为我已经从网页下载到本地机器的图像，在后台脚本中使用'downloads' API，但无法将其上传到我的服务器。 –

感谢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后台的代码。希望这可以适用于其他任何人。再次

谢谢。

来源

2016-11-08 00:57:31

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

回答

相关问题