사용자가 끌어서 놓기 및 기타 방법을 통해 페이지에 이미지를로드 할 수 있습니다. 이미지가 드롭되면 이미지 URL.createObjectURL
를 표시하기 위해 객체 URL로 변환하는 데 사용 합니다. 나는 그것을 재사용하기 때문에 URL을 취소하지 않습니다.
그것은 만들 수있는 시간이 온다 때, FormData
나는 그들이 거기에 그 이미지 중 하나를 사용하여 양식을 업로드 할 수 있도록 할 수 있도록 객체를, 내가 다음에 그 개체의 URL 다시 반전 할 수있는 몇 가지 방법이있다 Blob
또는 File
A를 다음 APPEND 그것이 내가 할 수 있도록이 FormData
목적?
답변
최신 솔루션 :
let blob = await fetch(url).then(r => r.blob());
URL은 개체 URL 또는 일반 URL 일 수 있습니다.
답변
gengkev가 위의 주석에서 언급했듯이이를 수행하는 가장 좋은 / 유일한 방법은 비동기 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에서 Cloudinary 이미지 업로드 기능에 이것을 사용했습니다 .
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)
}
})
답변
BlobBuilder가 Chrome에서 작동하지 않으므로 다음을 사용해야 함을 나타내는 XHR 요청에서 BLOB 데이터 가져 오기를 참조 하세요.
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에서 파일이나 blob을 얻는 방법’과 같은 것이 필요했고 현재 정답은 도메인 간이 아니기 때문에 내 요구에 맞지 않습니다.
Amazon S3 / Azure Storage의 이미지를 사용하는 웹 사이트가 있고 거기에 uniqueidentifiers라는 이름의 객체를 저장합니다.
샘플 : 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를 사용하여 다운로드 한 파일을 디스크에 저장했습니다. 필요한 경우 다음 자바 스크립트 라이브러리를 사용하세요.
https://github.com/eligrey/FileSaver.js/
나는 이것이 더 구체적인 필요를 가진 다른 사람들을 도울 것으로 기대합니다.
답변
어쨌든 캔버스에 파일을 표시하는 경우 캔버스 콘텐츠를 blob 개체로 변환 할 수도 있습니다.
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);
})