使用背景图像 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的主要内容,如果未能解决你的问题,请参考以下文章