使用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擴展將圖像上傳到服務器

回答

相關問題