嗨，我有我的自定义组件，我正在其中加载图像。我需要在选择图像之后和将其上传到服务器之前显示该图像。请问如何做到这一点？我尝试在 img 标签上使用 v-on:change 效果，但它不起作用。我的计划是使用 test() 函数来进行图像预览。
<template>
<div id="insert-component">
<div id="insert-new" >
<h2 class="text-md-left">New Category</h2>
<div class="mt-2 text-left">
<a href="#" id="img-button" class=" d-flex flex-wrap" v-on:click.stop="loadImage()">
<img src="/storage/images/no_image.png" alt="logo" v:on-change="test()">
<input type="file" class="d-none" id="load-category-image" v-on:input="handleFileSelected">
<button class="btn btn-dark btn-block" >Pridať obrázok</button>
</a>
<small class="text-danger d-none error">Súbor musí byť png, jpg alebo jpeg</small>
</div>
</div>
<button class="btn btn-success btn-block my-2" v-on:click="submit($event)">Pridať kategóriu</button>
</div>
</template>
<script>
export default {
name: "InsertComponent",
props: [ 'updateTableData' ],
data: function () {
return {
category_name: "",
category_description: "",
category_img:"/storage/images/no_image.png",
file:null
}
},
methods: {
test(){
alert("test");
},
loadImage(){
document.getElementById('load-category-image').click();
},
handleFileSelected(event) {
const acceptedImageTypes = ['image/jpg', 'image/jpeg', 'image/png'];
let loadedFile = document.getElementById('load-category-image').files;
if(acceptedImageTypes.includes(loadedFile[0]['type']))
{
this.category_img="/storage/images/"+loadedFile.name;
this.file=loadedFile;
}
else{
let $errorsElements = document.getElementsByClassName('error');
for (let item of $errorsElements) {
item.classList.remove('d-none');
};
category_img="/storage/images/no_image.png";
}
},
},
}
</script>
最佳答案
您可以使用URL.createObjectURL(files[0])生成url。
codepen - https://codepen.io/anon/pen/XGYoyr
关于javascript - Vue.js如何在更新前显示图像预览，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60738816/