Java將本地圖片轉字節流byte[]數組

• service

@Overridepublic byte[] image2bytes(String imgSrc) throws Exception {FileInputStream fin = new FileInputStream(imgSrc);//可能溢出,簡單起見就不考慮太多,如果太大就要另外想辦法，比如一次傳入固定長度byte[]byte[] bytes = new byte[fin.available()];//將文件內容寫入字節數組，提供測試的casefin.read(bytes);fin.close();return bytes;}

• controller

@ApiOperation(value = "")@PostMapping("getImgBytes")@ResponseBodypublic CommonResult<byte[]> getImgBytes(@RequestBody JSONObject jsonObject) throws Exception {Object obj = jsonObject.get("imgStr"); //前端傳來的是json對象，需要去除字符串String str = obj.toString(); //Object對象轉StringSystem.out.println(str);byte[] b = fragmentService.image2bytes(str);return CommonResult.success(b);}

Vue發送本地圖片url給后端，獲取圖片字節流并顯示圖片

• 將url發送給后端，獲取返回的字節流（其中imgPath為圖片url，imgBase存轉化的字節流）

showImgByte() {this.$http.post('http://localhost:8080/fragment/getImgBytes', {imgStr: this.imgPath}).then((response) => {if (response.data.code === 200) {this.$message({type: 'success',message: '成功'})console.log(response.data)this.imgBase = response.data.dataconsole.log(response.data.data)} else {this.$message({type: 'error',message: '失敗'})}})},

• 組件上顯示圖片
  template標簽中寫

<el-image:src="picUrl":fit="fit"/>

script標簽中的data(){}中寫

data() {return {imgPath: '', //存圖片urlexcelPath: '',picUrl: '', //img標簽顯示fit: 'fill', //img填充方式imgBase: '' //存圖片字節流}},

顯示圖像的button綁定的方法中寫，點擊即可顯示圖像

showImg() {this.picUrl = 'data:image/png;base64,' + this.imgBase},

總結

以上是生活随笔為你收集整理的Java后端传图片字节流到Vue前端显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。