IO操作（⼆进制流⽂件上传下载）后台 ⼆进制流 -＞ 前台blob对象 -＞⽣成 dateUrl-＞前台 file-＞dataUrl -blob -＞FormData -＞后台java 后台返回pdf的⼆进制流
@RequestMapping("/showPdf")
public void showPdf(HttpServletRequest request, HttpServletResponse response, HttpSession session){
response.setContentType("application/pdf");
FileInputStream in;
OutputStream out;
try{
//in = new FileInputStream(new Parameter("path")));
in =new FileInputStream("D:\\VW481_ZSB_数据三⽅列表_FK.pdf");
out = OutputStream();
byte[] b =new byte[512];
while((in.read(b))!=-1){
out.write(b);
}
out.flush();
in.close();
out.close();
}catch(IOException e){
// TODO Auto-generated catch block
e.printStackTrace();
}
}
vue 前台根据blob对象解析后台返回的⼆进制流
loadPdfHandler(row){
this.$http({
url:`cockpit/piwebPartnfo/showPdf`,
method:'get',
//responseType: 'arraybuffer',  //⼀定要设置响应类型，否则页⾯会是空⽩pdf
//responseType:"multipart/form-data",
responseType:'blob',
params:{ url:'1111111', lang:'en_US'},
headers:{
'Content-Type':'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
}).then(res =>{
const binaryData =[];
binaryData.push(res.data);
//获取blob链接
this.pdfObj.pdfSrc =ObjectURL(res.data);
this.showUnitPdf =true;
this.pdfObj.currentPage =1// 加载的时候先加载第⼀页
console.log()
});
//this.pdfObj.pdfSrc = "../../VW481_ZSB_数据三⽅列表_FK.pdf";
},
getObjectURL(file){
let url =null
ateObjectURL !==undefined){// basic
url = ateObjectURL(file)
}else if(window.webkitURL !==undefined){// webkit or chrome
try{
url = ateObjectURL(file)
}catch(error){
console.log(error)
}
}else if(window.URL!==undefined){// mozilla(firefox)
try{
url = ateObjectURL(file)
}catch(error){
console.log(error)
}
}
return url
},
java 后台返回 base64加密的图⽚流
static BASE64Encoder encoder =new BASE64Encoder();
static BASE64Decoder decoder =new BASE64Decoder();
private String getImageBinary(InputStream  inputStream){
//File f = new File("f://123456.jpg"); //这⾥gif动态图不可以，虽然在后⾯也能输出gif格式，但是却不是动图        BufferedImage bi;
try{
bi = ad(inputStream);
ByteArrayOutputStream baos =new ByteArrayOutputStream();
ImageIO.write(bi,"jpg", baos);
byte[] bytes = ByteArray();
deBuffer(bytes).trim();
}catch(IOException e){
e.printStackTrace();
}
return null;
}
处理base64 加密的⼆进制流⽣成blob对象
图⽚直接展⽰ base64加密的 字节流
img.src = “data:image/gif;base64,”+base64Str;
getBase64toDataUrl(base64Str){
var bstr =this.decode(base64Str),
n = bstr.length,
u8arr =new Uint8Array(n),
mime ="data:image/jpeg;base64";//⽂件类型 blob 使⽤
while(n--){
u8arr[n]= bstr.charCodeAt(n);
}
var blod =new Blob([u8arr],{
type: mime
});
let URL= window.URL|| window.webkitURL
let objectUrl =ateObjectURL(blod)
return objectUrl;
},
//解密⽅法
decode(input){
var _keyStr ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=' var output =''
var chr1, chr2, chr3
var enc1, enc2, enc3, enc4
var i =0
var re =/[^A-Za-z0-9\+\/\=]/g;
input = place(re,'')
while(i < input.length){
enc1 = _keyStr.indexOf(input.charAt(i++))
enc2 = _keyStr.indexOf(input.charAt(i++))
enc3 = _keyStr.indexOf(input.charAt(i++))
enc4 = _keyStr.indexOf(input.charAt(i++))
chr1 =(enc1 <<2)|(enc2 >>4)
chr2 =((enc2 &15)<<4)|(enc3 >>2)
chr3 =((enc3 &3)<<6)| enc4
output = output + String.fromCharCode(chr1)
if(enc3 !==64){
output = output + String.fromCharCode(chr2)
}
if(enc4 !==64){
output = output + String.fromCharCode(chr3)
}
}
output =this._utf8_decode(output)
return output
},
_utf8_decode(utftext){
let string =''
let i =0
let c =0
let c2 =0
let c3 =0
while(i < utftext.length){
c = utftext.charCodeAt(i)
if(c <128){
string += String.fromCharCode(c)
i++
}else if((c >191)&&(c <224)){
c2 = utftext.charCodeAt(i +1)
string += String.fromCharCode(((c &31)<<6)|(c2 &63))
i +=2
}else{
c2 = utftext.charCodeAt(i +1)
c3 = utftext.charCodeAt(i +2)
string += String.fromCharCode(((c &15)<<12)|((c2 &63)<<6)|(c3 &63))            i +=3
}chrome直接下载
}
return string
},
流程
anvas
流程1
file
fileReader
var reader =new FileReader();
// 传⼊⼀个参数对象即可得到基于该参数对象的⽂本内容
// sult 该属性表⽰⽬标对象的DataURL
that.imageDataUrl = sult
}
DataURL
//dataUrl -> blob 对象
var  data = dataUrl.split(',')[1];
data = window.atob(data);
var ia =new Uint8Array(data.length);
for(var i =0; i < data.length; i++){
ia[i]= data.charCodeAt(i);
}
return new Blob([ia],{
type:"image/jpeg"
});
// 2 不固定
let arr =this.cutAvater.split(',')
let data = window.atob(arr[1])
let mime = arr[0].match(/:(.*?);/)[1]
let ia =new Uint8Array(data.length)
for(var i =0; i < data.length; i++){
ia[i]= data.charCodeAt(i)
}
this.blob =new Blob([ia],{type: mime})
blob
var oMyForm =new FormData();
oMyForm.append(imgeInfoList[x].key, imgeInfoList[x].blob, fileName);
oMyForm.append("fileType",'image');
FormData
this.$http.post('onlineDataReport/upload',oMyform,{
'Content-Type':'multipart/form-data'
}).then(res=>{
})
request  java
通过Request 获取⽂件信息和参数
Gson gson=new Gson();
MultipartHttpServletRequest multipartRequest =(MultipartHttpServletRequest) request;
String baseInfo = Parameter("baseInfo");
ReportEntity reportEntity = gson.fromJson(baseInfo, ReportEntity.class);
reportEntity.setDataMap(gson.DataMapStr(),Map.class));
MultiValueMap<String, MultipartFile> multiValueMap = MultiFileMap();        List<MultipartFile> srcfiles = ("srcImageFile");//原图⽚
List<MultipartFile> reportfiles = ("reportImageFile");//报表⽂件
流程2
base64字节流->  blob  ->  dataUrl
请求类型
‘Content-Type’: ‘multipart/form-data’ // 处理⽂件
响应类型
responseType: ‘blob’,
后台响应头设置
response.setContentType(“application/pdf”); 输出⼆进制流
java 后端restTemp 进⾏⽂件上传下载
调⽤第三⽅接⼝上传⽂件
ByteArrayResource  HttpEntity    HttpHeaders    multipart/form-data  Content-Length

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。