javascript - Vue.js如何在更新前显示图像预览
问题描述
嗨,我有我正在加载图像的自定义组件。我需要在选择图像之后和将其上传到服务器之前显示该图像。请问这个怎么做?我尝试对 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])
生成网址。
codepen - https://codepen.io/anon/pen/XGYoyr
推荐阅读
- c# - Xamarin 表单刷新列表视图以多次点击一个项目
- java - 试图拦截 jdbcOperations 并使用字节伙伴返回固定值
- php - PHP 中的短 IF 和长 IF 变量赋值方法
- c++ - 使用类成员创建数组
- c# - C# SocketIOClientDotNet 似乎不起作用
- python - 如何在 SymPy 中定义一个通过 .equals() 比较元素的 FiniteSet
- json - 如何通过 JSON 文件中的链接从本地文件夹加载图像?
- yarnpkg - yarn 如何找到作为开发依赖项安装的模块
- java - 无法从 'optional:configserver:http://localhost:8090 - SpringBoot 2.4.0 Illford 2020.0.0-M3 加载配置数据
- c++ - 在没有结构实例的情况下获取非静态结构字段的地址会产生什么?