javascript - 在 Chrome 扩展程序中自动下载并上传文件

Question

这个问题已经有答案了:

Google chrome rehost image extension (1 个回答)

已关闭 9 年前。

我正在编写一个 Chrome 扩展程序，它可以自动从一个位置下载文件，然后将其上传到另一个位置。我已经弄清楚如何使用 HTML5 文件系统 API 来完成下载部分。但是，我不知道如何上传文件。

问题是上传必须通过使用"file"输入元素的表单来完成。我只想告诉表单文件所在的位置(我可以从文件系统 API 获取下载文件的位置)。但我无法找出以编程方式执行此操作的方法。

有什么想法吗？如果我可以澄清任何事情，请告诉我!

编辑:另一个选择是 chrome.downloads 扩展 API

编辑:文件 API 看起来很有前途 ( http://dev.w3.org/2006/webapi/FileAPI/ )。我还发现这很有帮助:https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

Answer 1

所以，这就是我最终让它发挥作用的方式。它是在 Chrome 扩展程序中完成的。我认为在普通的浏览器脚本中这是不可能的，因为使用了 canvas.toDataURL 函数，如果下载的文件是跨源的，则会抛出安全异常。无论如何，这是我的做法的简化版本。幸运的是，我下载和上传的文件是图像，所以我可以使用 Image() 类。

// load the image
var img = new Image();
img.src = "url to image";

// loaded
img.onload = function() {
    // convert the image into a data url
    var dataUrl = getImageDataUrl(this);

    var blob = dataUrlToBlob(dataUrl);

    // FormData will encapsulate the form, and understands blobs
    var formData = new FormData();

    // "image_name.png" can be whatever you want; it's what the
    // host will see as the filename for this image (the host server
    // that receives the posted form).  it doesn't have to match the
    // original filename, and can be arbitrary or not provided at all.
    formData.append("file", blob, "image_name.png");

    var request = new XMLHttpRequest();

    // upload
    request.open("POST", "url to form");
    request.send(formData);
};


// converts an image into a dataurl
function getImageDataUrl(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);


    // NOTE:  this will throw a cross-origin security exception
    // if not done in an extension and if the image is cross-origin
    return canvas.toDataURL("image/png");
}

// converts a dataurl into a blob
function dataUrlToBlob(dataUrl) {
    var binary = atob(dataUrl.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}