javascript - 使用 Express 下载图像并使用 AJAX 在 Vue 中显示

Question

我遇到了一个问题，也许你们中的一些人有答案。我有一个类似仪表板的应用程序在 MEVN Stack 上运行。我希望用户能够上传他的图像​​并将其存储在后端服务器中，因为据我所知，无法直接上传到 VueJS 项目公共(public)文件夹。
所以我找到了一种上传它的方法，这要归功于我在这里找到的一些帖子。但我找不到回去的路。我的图像存储在我的后端服务器上，我想使用 blob 形式的 axios 获取它并在 VueJS 中显示它。它应该很简单，但我可能会错过一些东西。
首先，我获取我的图像文件的名称并使用 Express 发送它:res.sendfile(path.join(__dirname,"../../images/societies/",result.img_link));如果没有图像，我也会返回一个默认图像 url，这可以正常工作，但不会返回获取的图像。问题是我无法直接使用 URL 访问图像，它无法访问。所以我必须找到一种方法将它作为一个blob来获取并显示它。
这是我用来在前端获取图像的代码，VueJS(脚本部分):

getSocietyImage(society) {
    if(society.image){
      this.$http
        .get(this.apiUrl + "society/getImg/" + society.id)
        .then(image => {
          return image.data
        })
        .catch(err => {
          console.log(err)
        })
    }else{
        return this.basicImgUrl
    }
}

这是模板部分中的代码，它是 v-for 指令的一部分:

<img
    :src="getSocietyImage(society)"
    alt="content-img"
    class="responsive card-img-top"
/>

以下是我从来自 console.log() 的请求中得到的信息:

感谢大家的帮助!

Answer 1

问题 1:模板方法
你不应该绑定(bind)到方法。每次重新渲染模板时都会运行该方法，这意味着每当某些相关数据发生更改时。
问题 2:模板异步
模板渲染是同步的，这意味着您根本无法绑定(bind)到异步方法。您应该使用生命周期 Hook (此示例使用 URL):

new Vue({
  el: "#app",
  data() {
    return {
      myimage: null
    }
  },
  methods: {
    async getImage() {
      // Just a mockup of returning something async
      return await 'https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg';
    }   
  },
  async created() {
    this.myimage = await this.getImage();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img :src="myimage">
</div>

问题 3:HTML 中的二进制数据
您可以发回原始二进制文件或转换为 base 64
3a.原始二进制文件(使用 blob )
服务器

res.sendFile(file);  // Send raw binary

浏览器

<img :src="myimage" />

async created() {
  const { data } = await this.getImage(); // Binary from server
  const blob = new Blob([data]);
  this.myimage = URL.createObjectURL(blob);
}

注意:不要忘记用 URL.revokeObjectURL 清理
3b. Base64
或者，您可以先使用 Express 将二进制文件转换为 Base64(但 Base64 占用的带宽比二进制文件多约 33%):
服务器

const bitmap = fs.readFileSync(file);
const base64 = new Buffer.from(bitmap).toString("base64");
res.send(base64);  // Send base64 instead of the raw file binary

浏览器

<img :src="myimage" />

async created() {
  const { data } = await this.getImage(); // base64 data from server
  this.myimage = 'data:image/png;base64,' + data;
}