JavaScript——responseType

Posted 2020-11-20 站错队了同志

https://www.cnblogs.com/cdemo/p/5225848.html

https://blog.csdn.net/wkyseo/article/details/78232485

• 异步请求图片，需要在responseType指定是blob类型
• 指定接受的类型，res.data 就是Blob 类型，所以不用在var blob = new Blob([res.data])接受

<template>
  <div class="recImage">
    <div :style="{backgroundImage:\'url(\'+urlData+\')\'}" class="showImage"></div>
    <span class="btn" @click="recData">异步获取文件</span>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      urlData: ""
    };
  },
  methods: {
    recData() {
      axios({
        method: "post",
        url: "http://127.0.0.1:3000",
        responseType: "blob"
      }).then(res => {
        this.urlData = window.URL.createObjectURL(res.data);
        window.URL.revokeObjectURL(res.data);
      });
    }
  }
};
</script>
<style scoped>
.recImage {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
}
.recImage .showImage {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.recImage .btn {
  padding: 5px 10px;
  border: 1px solid #ccc;
  margin-top: 15px;
  cursor: pointer;
}
</style>