vue解析blob 二进制流图片的展示
<el-image v-loading="loading" style='height: 480px;' :src="imgsrc"></el-image><script>import {getFlowPhoto} from "@/api/plan.js";export default {data() {return {imgsrc:'',loading:fal
·
<el-image v-loading="loading" style='height: 480px;' :src="imgsrc"></el-image>
// /api/plan.js文件请求方法
export function getFlowPhoto(data) {
return request({
url: '/xxx/xxxx/getFlowPhoto',
method: 'post',
responseType: 'blob',
data
})
}
<script>
import {getFlowPhoto} from "@/api/plan.js";
export default {
data() {
return {
imgsrc:'',
loading:false,
}
},
mounted() {},
methods: {
fetchData() {
this.loading = true;
var that = this;
getFlowPhoto({id:xxx}).then((res) => {
if(res.code == 401){
this.$message({
message: res.message,
type: "error",
});
}
if(res){
const myBlob = new window.Blob([res], {type: 'image/jpeg'})
const qrUrl = window.URL.createObjectURL(myBlob)
this.imgsrc = qrUrl;
this.loading = false;
}
});
},
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)