在Vue.js中上载图像之前如何显示图像？

在接下来的教程中，我制作了这个组件，它可以一次上传多个图像，并显示要上传的文件名

这很好，但我想知道如何显示照片（理想情况下调整到一定的最大宽度）而不是它们的文件名

      <div v-if="showUploadPhotoModal">
        <transition name="modal">
          <div class="modal-mask">
            <div class="modal-wrapper">

            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header"><strong>{{username}}</strong>&nbsp;&nbsp;
                        <h6 class="modal-title">Upload Photos <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
                        </h6>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" @click="showUploadPhotoModal = false">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">


                        <form @submit.prevent="sendFile" enctype="multipart/form-data">
                              <div class="form-group">
                                  <textarea class="form-control" rows="5" v-model="title" placeholder="Title"></textarea>

                              </div>

                              <div v-if="fileError" class="alert alert-danger">{{message}}</div>


                             <label class="upload-btn"><br>
                             <span>
                               <img class="logo img-responsive" src="../assets/images/upload.png">
                               <br>
                             </span>
                                Upload Files <input multiple type="file" @change="selectFile" ref="files" hidden>
                                 <br>

                             </label>
                            </form>   

                    </div>

                  <div class="field">
                    <div v-for="(file, index) in files"  :key="index" class="row photo-list" >

                      <div class="col-10 col-push-6">
                        <div :class="`text-right ${file.invalidMessage ?'red':'black'}`">{{file.name}} 

                          <span v-if="file.invalidMessage!=''">&nbsp; <small>{{file.invalidMessage}}</small> </span>
                        </div>

                      </div>
                      <div class="col-2">
                        <div class="text-left">
                          <a @click.prevent="files.splice(index, 1);uploadFiles.splice(index, 1)" class="remove-btn"> <strong >&times;</strong></a>
                        </div>
                      </div>
                    </div>

                  </div>

                    <span @click="sendFile" class="btn btn-primary">Send</span>

                </div>
            </div>

            </div>
          </div>
        </transition>
      </div>





 data () {
    return { 
        showUploadPhotoModal: false,
        files: [],
        uploadFiles: [],
        title: "",
        message: "",
        fileError: false,


    }
  },
  methods: {
    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)

       }))
  ];

},

validate(file) {
  const allowedTypes = ["image/jpeg", "image/png", "image/gif"];
  if(!allowedTypes.includes(file.type)) { 
    return "Not an image"
  }
  return "";
},

sendFile() {
  const formData = new FormData();

  formData.append('title', this.title);
  formData.append('token', this.token);

  _.forEach(this.uploadFiles, file => {
    if(this.validate(file)==="") {
      formData.append('files', file);
    }
  });

  axios.post(this.BASE_URL + "/api/post", formData)
  .then(res => {
    console.log('res data is:', res.data);
    this.files=[];
    this.uploadFiles=[];
    })
  .catch(err => {
    console.log('error is', err.response.data.error)
    this.fileError = true;
    });
}


  },

{{username}}
上传照片
&时代；
{{message}}




上传文件


{{file.name}
{{file.invalidMessage}
&时代
发送
数据（）{
返回{
showUploadPhotoModal:false，
文件：[]，
上载文件：[]，
标题：“，
消息：“”，
fileError:false，
}
},
方法：{
选择文件（）{
const files=this.$refs.files.files；
this.uploadFiles=[…this.uploadFiles，…files]；
此文件的长度=[
…这个文件，
.map（文件，文件=>({
name:file.name，
type:file.type，
invalidMessage:this.validate（文件）
}))
];
},
验证（文件）{
const allowedTypes=[“image/jpeg”、“image/png”、“image/gif”]；
如果（！allowedTypes.includes（file.type））{
返回“非图像”
}
返回“”；
},
sendFile（）{
const formData=new formData（）；
formData.append（'title'，this.title）；
formData.append（'token'，this.token）；
_.forEach（this.uploadFiles，file=>{
如果（此.validate（文件）==“”）{
formData.append（'files'，file）；
}
});
axios.post（this.BASE_URL+“/api/post”，formData）
。然后（res=>{
log（'res数据为：'，res.data）；
this.files=[]；
this.uploadFiles=[]；
})
.catch（错误=>{
console.log（'error is'，err.response.data.error）
this.fileError=true；
});
}
},

为了处理这个问题，我从以下布局开始：

<div id="app" v-cloak>
  <input type="file" multiple accept="image/*"
     @change="handleSelects" name="images">
  <div v-for="image in images">
    <img :src="image" class="preview">
  </div>
</div>

所以handleSelects做了一些事情。首先，它重置缩略图（this.images）。然后查看输入中选择的文件，检查它们是否为图像，并为每个文件设置文件读取器。对于每个文件，它都会获得一个数据url，然后将该url添加到该图像数组中，以便可以创建预览

---

你可以在这里看到完整的代码笔：

所以不赞成出现博客帖子的答案，但我在这里介绍了一种方法（不是Vue！）-。这有帮助吗？如果是的话，我会把它作为一个答案贴出来@RaymondCamden，请查看我的实现问题：

const app = new Vue({
  el:'#app',
  data:{
    images:[]
  },
  methods:{
    handleSelects(e) {
      this.images = [];
      let fileList = Array.prototype.slice.call(e.target.files);
      fileList.forEach(f => {

        if(!f.type.match("image.*")) {
          return;
        }

        let reader = new FileReader();
        let that = this;

        reader.onload = function (e) {
          that.images.push(e.target.result);
        }
        reader.readAsDataURL(f); 
      });
    }
  }
})