javascript - 从数据组件访问上传的文件

Question

我正在使用 Vue 创建一个测验网络应用程序，我想使用图像上传来使它们更加直观。创建测验时，您可以选择为每个问题上传图像。测验与问题在同一页面上创建，问题在对话框中创建。在这个“添加测验”页面上，我希望能够编辑问题(例如，查看我已经“添加”到测验中的问题并更改一些详细信息)。为此，每个“编辑”对话框中的图像组件对于每个问题都会以不同的方式呈现 - 如果上传了图像，它将显示图像，否则不会显示图像。我可以毫无问题地上传图像、保存图像并针对 img 组件中的每个新问题预览它们。我遇到的问题是重新访问已经上传的图像，而不先将它们上传到我的数据库。

我是如何尝试的:

上传文件，在 img 标签中预览并使用以下方式保存数据:

imageAttached(event){
    const files = event.target.files
    this.newQuestionImage = files[0]
    const fileReader = new FileReader();
    fileReader.addEventListener('load', () => {
        this.imgsrc = fileReader.result
    })            
    fileReader.readAsDataURL(files[0])
    this.attachedImages.push({
        question: this.question,
        file: this.newQuestionImage,
        fileURL: this.imgsrc
    })
}

然后，我尝试将 fileURL 绑定(bind)到“编辑”对话框中的 img 组件，但失败了。我想不出另一种方法来做到这一点，所以我在添加每个问题后将图像上传到我的数据库并创建对此的引用。这里的一个问题是，这使得添加每个问题变得非常麻烦，例如上传了几张图像，这使得编辑/删除问题变得非常困惑，所以当我提交要添加的测验时，我宁愿在一个简单的迭代函数中完成此数据库上传。有没有办法从数据组件访问此文件和其他文件并将其绑定(bind)到 img 标签？

Answer 1

将 push 移至事件处理程序内，以便文件值在设置之前不会被复制。

new Vue({
  el: '#app',
  data: {
    attachedImages: []
  },
  methods: {
    imageAttached(event) {
      const files = event.target.files;
      const fileReader = new FileReader();

      fileReader.addEventListener('load', () => {
        this.attachedImages.push({
          question: this.question,
          file: this.newQuestionImage,
          fileURL: fileReader.result
        })
      })
      fileReader.readAsDataURL(files[0]);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" @change="imageAttached">
  <img v-for="img in attachedImages" :src="img.fileURL">
</div>