Javascript 从数据组件访问上载的文件

我正在使用Vue创建一个测验web应用程序，我想使用图像上传使其更加直观。创建测验时，您可以选择将图像上载到每个问题。测验与在对话框中创建的问题在同一页上创建。在这个“添加测验”页面上，我希望能够编辑问题（例如，查看我已经“添加”到测验中的问题并更改一些细节）。为此，每个“编辑”对话框中的图像组件对于每个问题的呈现方式都会有所不同-如果上传了图像，它将显示图像，否则不会显示图像。我可以上传图片，保存它们，并在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绑定到我的img组件，但失败了。我想不出另一种方法来解决这个问题，所以在每个问题都被添加后，我就把图片上传到我的数据库中，并创建一个引用。这里的一个问题是，如果上传了几个图像，那么添加每个问题会非常麻烦，并且编辑/删除问题会非常混乱，因此我希望在提交要添加的测验时，在一个简单的迭代函数中完成此数据库上传。是否有一种方法可以从数据组件访问此文件和其他文件，并将其绑定到img标记？

在事件处理程序中移动

推送

，以便在设置文件值之前不会复制文件值

newvue({
el:“#应用程序”，
数据：{
附件：[]
},
方法：{
附件（活动）{
const files=event.target.files；
const fileReader=new fileReader（）；
fileReader.addEventListener（'load'，（）=>{
这个。附件。推({
问:这个问题,，
文件：this.newQuestionImage，
fileURL:fileReader.result
})
})
readAsDataURL（文件[0]）；
}
}
});
在事件处理程序中移动
按钮
，以便在设置文件值之前不会复制文件值


newvue({
el:“#应用程序”，
数据：{
附件：[]
},
方法：{
附件（活动）{
const files=event.target.files；
const fileReader=new fileReader（）；
fileReader.addEventListener（'load'，（）=>{
这个。附件。推({
问:这个问题,，
文件：this.newQuestionImage，
fileURL:fileReader.result
})
})
readAsDataURL（文件[0]）；
}
}
});

是否为
this.imgsrc
和
this.attachedImages
两个
data
项目？是否为
this.imgsrc
和
this.attachedImages
两个
data
项目？