JSFiddle - React, Tailwind, and code Playground
HTML
<div contenteditable id="v">http://1.194.233.111:8000/obs/file/downloadForPublic?sign=xnqXEhTgoxy7Kj%2BnMwlrqZvR8ss6crhV0osf250lQlM2kHkwiX61EnDdoQ9Fz9meNGo04JIFX78dKKC%2BnclUoQ%3D%3D&appSerialNo=20181011105754688681&tenantId=p2pp_apply&fileId=d0db00aa92a4422cb1d2aa879b7f4e8c×tamp=1528791460</div>
<button id="btn">AJAX POST: i need some 2-bit img</button>
CSS
[contenteditable] {
border: 1px solid;
margin: 1em 0;
padding: .5em;
}
JavaScript
var btn = document.getElementById("btn") ,
addr = document.getElementById("v") ;
btn.addEventListener("click", function(evt){
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://1.194.233.111:8000/obs/file/downloadForPublic?sign=xnqXEhTgoxy7Kj%2BnMwlrqZvR8ss6crhV0osf250lQlM2kHkwiX61EnDdoQ9Fz9meNGo04JIFX78dKKC%2BnclUoQ%3D%3D&appSerialNo=20181011105754688681&tenantId=p2pp_apply&fileId=d0db00aa92a4422cb1d2aa879b7f4e8cĂ—tamp=1528791460",true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function(){
console.log(this);
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
}
xmlhttp.send();
}, false) ;