前端调用方法
此方法目前只支持单次回显照片;
如需多张照片回显,需要循环多次调用后台接口。
// 需要导入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);
}
}