我正在做一个能够从网页获得图像的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.downloads
与createObjectURL
一起从扩展的内存"下载"它。