Vue中将本地照片回显到前端页面

前端调用方法
此方法目前只支持单次回显照片；
如需多张照片回显，需要循环多次调用后台接口。

// 需要导入axios
import axios from 'axios'

data() {
	return {
    	imgUrls:[]
    }
}
methods: {
// 照片回显(传入本地路径做为参数)
	view(path) {
	   axios({
	     method: 'post',
	     headers: { Auth: localStorage.getItem('token') },// 如果需要，传入token到请求头
	     url: '/aaa/bbbb/fileOutputStream.z',// 请求的url
	     params: { path: path },// 照片存放的本地路径
	     responseType: 'blob' // 更改responseType类型为 blob
	   }).then(res => {
	     const url= window.URL.createObjectURL(new Blob([res.data], { type: 'image/jpeg;charset=utf-8' }))
	     this.imgUrls.push(url)
	   }).catch(error => {
	     this.$message({
	       type: 'error',
	       message: '系统异常：' + error,
	       center: false
	     })
	   })
	}
}

前端的HTML

<!-- 这里用el-image和原生img都行 -->
<div v-for="(url,index) in imgUrls" :key="index" style="display: inline-block">
	<el-image style="width: 148px;height: 148px" :src="url" fit="cover"></el-image>
</div>

后端接口

@RequestMapping("/fileOutputStream")
public void fileOutputStream(HttpServletRequest request,HttpServletResponse response) throws Exception {
	FileInputStream input = null;
	OutputStream outputStream = null;
	try {
		String file = request.getParameter("path");
		File f = new File(file);
		byte[] data = null;
		input = new FileInputStream(f);
		data = new byte[input.available()];
		input.read(data);

		outputStream = response.getOutputStream();
		outputStream.write(data);
	} catch (Exception e) {
		e.printStackTrace();
	}finally {
		IOUtils.closeQuietly(input);
		outputStream.flush();
		IOUtils.closeQuietly(outputStream);
	}
}