Question

按照this优秀教程在Vue.js中制作多文件上传组件之后，我希望能够让用户在上传之前预览图像。因此，我尝试在每个照片文件中添加一个uri字段，以使其在v-for循环中显示，如下所示：

<div v-for="(file, index) in files"  :key="index">
     <img :src="file.uri" alt="Image">
</div>

以下是选择文件的方法：

 selectFile() {
      const files = this.$refs.files.files;
      this.uploadFiles = [...this.uploadFiles, ...files];


      this.files = [
           ...this.files,
           ..._.map(files, file => ({
             name: file.name,
             type: file.type,
             invalidMessage: this.validate(file)

           }))
      ];

     this.files.forEach( function (file) {
        let reader  = new FileReader();
        file.uri =   reader.readAsDataURL(file); //<-Problem here
     }  
     );

这是错误消息：

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

我知道关于此错误还有其他几个问题，但是没有一个对我有帮助，也许是因为没有一个像我在Vue.js中那样循环处理文件。

我也查看了Mozilla docs，但在这种情况下无法采用他们的示例。

非常感谢您提出的解决方案。

无法在Vue.js中预览图像

0 个答案: