Cannot preview images in Vue.js

问题

After following on this greate tutorial to make a multi-file upload component in Vue.js, I'd like to be able to let users to preview images before uploading them. So I try to add a uri field to each photo file, in order to show them in a v-for loop like this:

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

Here is the method to select files:

 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
     }  
     ); 

Here is the error message:

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

I know there are a couple other questions on SO about this error, but none helped me, perhaps because none deals with file in a loop as I do here with Vue.js.

I have also looked at Mozilla docs, but could not adopt their example to this situation.

Really appreciate your hints to fix this.

来源：https://stackoverflow.com/questions/53998127/cannot-preview-images-in-vue-js