จะรับไฟล์หรือหยดจาก URL วัตถุได้อย่างไร

ฉันอนุญาตให้ผู้ใช้โหลดภาพลงในเพจผ่านการลากและวางและวิธีอื่น ๆ เมื่อภาพหลุดฉันกำลังใช้URL.createObjectURLเพื่อแปลงเป็น URL วัตถุเพื่อแสดงภาพ ฉันไม่ได้เพิกถอน url เนื่องจากใช้ซ้ำ

ดังนั้นเมื่อถึงเวลาต้องสร้างFormDataออบเจ็กต์เพื่อที่ฉันจะได้อนุญาตให้พวกเขาอัปโหลดแบบฟอร์มที่มีรูปใดรูปหนึ่งอยู่ในนั้นมีวิธีใดบ้างที่ฉันสามารถย้อนกลับ Object URL นั้นกลับไปเป็นBlobหรือFileดังนั้นฉันจึงสามารถต่อท้ายด้วยFormDataวัตถุ?

โซลูชันที่ทันสมัย:

let blob = await fetch(url).then(r => r.blob());

url อาจเป็น url วัตถุหรือ url ธรรมดาก็ได้

ดังที่ gengkev กล่าวถึงในความคิดเห็นของเขาด้านบนดูเหมือนว่าวิธีที่ดีที่สุด / วิธีเดียวที่จะทำได้คือการเรียก async xhr2:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//your.blob.url.here', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var myBlob = this.response;
    // myBlob is now the blob that the object URL pointed to.
  }
};
xhr.send();

อัปเดต (2018): สำหรับสถานการณ์ที่สามารถใช้ ES5 ได้อย่างปลอดภัย Joe มีคำตอบตาม ES5 ที่ง่ายกว่าด้านล่าง

อาจมีคนพบว่าสิ่งนี้มีประโยชน์เมื่อทำงานกับ React / Node / Axios ฉันใช้สิ่งนี้สำหรับคุณสมบัติการอัปโหลดรูปภาพบนคลาวด์ด้วยreact-dropzoneบน UI

    axios({
        method: 'get',
        url: file[0].preview, // blob url eg. blob:http://127.0.0.1:8000/e89c5d87-a634-4540-974c-30dc476825cc
        responseType: 'blob'
    }).then(function(response){
         var reader = new FileReader();
         reader.readAsDataURL(response.data); 
         reader.onloadend = function() {
             var base64data = reader.result;
             self.props.onMainImageDrop(base64data)
         }

    })

ดูการรับข้อมูล BLOB จากคำขอ XHRซึ่งชี้ให้เห็นว่า BlobBuilder ไม่ทำงานใน Chrome ดังนั้นคุณต้องใช้:

xhr.responseType = 'arraybuffer';

ใช้การดึงข้อมูลเช่นด้านล่าง:

 fetch(<"yoururl">, {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + <your access token if need>
    },
       })
.then((response) => response.blob())
.then((blob) => {
// 2. Create blob link to download
 const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `sample.xlsx`);
 // 3. Append to html page
 document.body.appendChild(link);
 // 4. Force download
 link.click();
 // 5. Clean up and remove the link
 link.parentNode.removeChild(link);
})

คุณสามารถวางบนคอนโซล Chrome เพื่อทดสอบ ไฟล์ที่ดาวน์โหลดด้วย 'sample.xlsx' หวังว่าจะช่วยได้!

น่าเสียดายที่คำตอบของ @ BrianFreud ไม่ตรงกับความต้องการของฉันฉันมีความต้องการที่แตกต่างกันเล็กน้อยและฉันรู้ว่านั่นไม่ใช่คำตอบสำหรับคำถามของ @ BrianFreud แต่ฉันจะทิ้งไว้ที่นี่เพราะมีคนจำนวนมากมาที่นี่ด้วยความต้องการเดียวกันของฉัน ฉันต้องการบางอย่างเช่น 'จะรับไฟล์หรือหยดจาก URL ได้อย่างไร' และคำตอบที่ถูกต้องในปัจจุบันไม่ตรงกับความต้องการของฉันเพราะไม่ใช่ข้ามโดเมน

ฉันมีเว็บไซต์ที่ใช้ภาพจาก Amazon S3 / Azure Storage และที่นั่นฉันเก็บวัตถุที่ตั้งชื่อด้วยตัวบ่งชี้ที่ไม่ซ้ำกัน:

ตัวอย่าง: http: //****.blob.core.windows.net/systemimages/bf142dc9-0185-4aee-a3f4-1e5e95a09bcf

ภาพนี้บางส่วนควรดาวน์โหลดจากอินเทอร์เฟซระบบของเรา เพื่อหลีกเลี่ยงการส่งผ่านทราฟฟิกนี้ผ่านเซิร์ฟเวอร์ HTTP ของฉันเนื่องจากอ็อบเจ็กต์นี้ไม่ต้องการความปลอดภัยใด ๆ ในการเข้าถึง (ยกเว้นโดยการกรองโดเมน) ฉันตัดสินใจที่จะส่งคำขอโดยตรงบนเบราว์เซอร์ของผู้ใช้และใช้การประมวลผลภายในเพื่อตั้งชื่อจริงให้ไฟล์และ ส่วนขยาย.

เพื่อให้บรรลุผลสำเร็จฉันได้ใช้บทความดีๆจาก Henry Algus: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

1. ขั้นตอนแรก: เพิ่มการสนับสนุนไบนารีใน jquery

/**
*
* jquery.binarytransport.js
*
* @description. jQuery ajax transport for making binary data type requests.
* @version 1.0 
* @author Henry Algus <henryalgus@gmail.com>
*
*/

// use this transport for "binary" data type
$.ajaxTransport("+binary", function (options, originalOptions, jqXHR) {
    // check for conditions and support for blob / arraybuffer response type
    if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
        return {
            // create new XMLHttpRequest
            send: function (headers, callback) {
                // setup all variables
                var xhr = new XMLHttpRequest(),
        url = options.url,
        type = options.type,
        async = options.async || true,
        // blob or arraybuffer. Default is blob
        dataType = options.responseType || "blob",
        data = options.data || null,
        username = options.username || null,
        password = options.password || null;

                xhr.addEventListener('load', function () {
                    var data = {};
                    data[options.dataType] = xhr.response;
                    // make callback and send data
                    callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
                });

                xhr.open(type, url, async, username, password);

                // setup custom headers
                for (var i in headers) {
                    xhr.setRequestHeader(i, headers[i]);
                }

                xhr.responseType = dataType;
                xhr.send(data);
            },
            abort: function () {
                jqXHR.abort();
            }
        };
    }
});

2. ขั้นตอนที่สอง: ส่งคำขอโดยใช้ประเภทการขนส่งนี้

function downloadArt(url)
{
    $.ajax(url, {
        dataType: "binary",
        processData: false
    }).done(function (data) {
        // just my logic to name/create files
        var filename = url.substr(url.lastIndexOf('/') + 1) + '.png';
        var blob = new Blob([data], { type: 'image/png' });

        saveAs(blob, filename);
    });
}

ตอนนี้คุณสามารถใช้ Blob ที่สร้างขึ้นตามที่คุณต้องการในกรณีของฉันฉันต้องการบันทึกลงในดิสก์

3. ทางเลือก: บันทึกไฟล์บนคอมพิวเตอร์ของผู้ใช้โดยใช้ FileSaver

ฉันใช้ FileSaver.js เพื่อบันทึกไฟล์ที่ดาวน์โหลดลงในดิสก์หากคุณต้องการทำสิ่งนั้นให้สำเร็จโปรดใช้ไลบรารี javascript นี้:

https://github.com/eligrey/FileSaver.js/

ฉันคาดหวังว่าสิ่งนี้จะช่วยให้ผู้อื่นมีความต้องการเฉพาะเจาะจงมากขึ้น

หากคุณแสดงไฟล์ในผืนผ้าใบคุณยังสามารถแปลงเนื้อหาแคนวาสเป็นวัตถุหยดได้

canvas.toBlob(function(my_file){
  //.toBlob is only implemented in > FF18 but there is a polyfill 
  //for other browsers https://github.com/blueimp/JavaScript-Canvas-to-Blob
  var myBlob = (my_file);
})