使用背景图像 css 样式预览多个图像 Vue JS

Posted

技术标签:

【中文标题】使用背景图像 css 样式预览多个图像 Vue JS【英文标题】:Preview Multiple Images Vue JS with background image css style 【发布时间】:2021-04-12 12:50:54 【问题描述】:

当用户在上传之前选择它们时,我试图显示一些图像的预览,但我是 vue 新手,我不知道如何将背景图像 url 样式应用于每个 div (它必须带有背景图片),到目前为止,这是我的 UploadComponent:

<template>
    <div class="content">
            
            <h1> title </h1>
            <div class="btn-container">
                <label class="button" for="images">Select Images</label>
                <input type="file" id="images" name="images[]" multiple="multiple" @change="selectFiles"/>
                
            </div>
            <br><br>
            <div class="block">
                <h3>Selected images</h3>
                

                <div v-for="image in images" v-bind:key="image" class="image-result" v-bind:style=" backgroundImage: 'url(' + image + ')' ">

                </div>

            </div>
            <div class="btn-container">
                <button type="button" class="submit-btn" v-on:click="uploadImages">Submit Images</button>
            </div>
            <br><br>
            <div class="block">
                <h3>Uploaded images</h3>
                <div class="files-preview">
                    
                    
                </div>
            </div>
    </div>
  
</template>

<script>
import axios from 'axios';

export default 
  name: 'UploadComponent',
  data: () => (
      title: 'Select your images first and then, submit them.',
      images: []
  ),
  methods:
      selectFiles(event)
        var selectedFiles = event.target.files;
        var i = 0;

        for (i = 0; i < selectedFiles.length; i++)
            this.images.push(selectedFiles[i]);
        

        for (i = 0; i < this.images.length; i++)
            let reader = new FileReader(); //instantiate a new file reader
            reader.addEventListener('load', function()
                
                console.log(this);
            .bind(this), false);  //add event listener

            reader.readAsDataURL(this.images[i]);
        
      ,
      uploadImages()
        const data = new FormData();
        data.append('photos', this.images);

        axios.post('url')
                .then(res => 
                    console.log(res);
                );
      
  

</script>

正在创建 div,但我缺少分配背景图像的部分,我该如何解决这个问题?

【问题讨论】:

【参考方案1】:

您不能直接将File 作为background-image 的参数。你开始使用FileReader,但没有对结果做任何事情。

下面是我要做的,我将您的images 数组转换为具有file 属性和preview 属性的对象列表,只是为了将文件和预览链接在一起。

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue(
  el: "#app",
  data: () => 
    return 
      title: 'Select your images first and then, submit them.',
      images: []
    
  ,
  methods: 
    selectFiles(event) 
      var selectedFiles = event.target.files;

      for (var i = 0; i < selectedFiles.length; i++) 

        let img = 
          file: selectedFiles[i],
          preview: null
        ;
        let reader = new FileReader();
        reader.addEventListener('load', () => 

          img.preview = reader.result;
          this.images.push(img);
        );

        reader.readAsDataURL(selectedFiles[i]);
      
    ,
    uploadImages() 

      const data = new FormData();
      data.append('photos', this.images.map(image => image.file));

      axios.post('url')
        .then(res => 
          console.log(res);
        );
    
  
);
.image-result 
  width: 100px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="content">

  <h1> title </h1>
  <div class="btn-container">
    <label class="button" for="images">Select Images</label>
    <input type="file" id="images" name="images[]" multiple="multiple" @change="selectFiles" />

  </div>
  <br><br>
  <div class="block">
    <h3>Selected images</h3>
    <div id="target-photos">

    </div>

    <div v-for="image in images" class="image-result" v-bind:style=" backgroundImage: 'url(' + image.preview + ')' ">

    </div>

  </div>
  <div class="btn-container">
    <button type="button" class="submit-btn" v-on:click="uploadImages">Submit Images</button>
  </div>
  <br><br>
  <div class="block">
    <h3>Uploaded images</h3>
    <div class="files-preview">


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

【讨论】:

以上是关于使用背景图像 css 样式预览多个图像 Vue JS的主要内容,如果未能解决你的问题,请参考以下文章

以不同样式重复多个图像作为背景

强制浏览器在 chrome、firefox 上打印背景图像

多个背景图像 IE8

Vue 样式(背景图像)绑定不响应

如何使用 CSS 为多个图像设置不同的样式?

我在 vue js 样式标签中加载背景图像时遇到问题 [关闭]