基于基于VUE选择上传图片并页面显示(图片可删除)选择上传图片并页面显示(图片可删除)
主要为大家详细介绍了基于VUE选择上传图片并页面显示,图片可以删除的效果,具有一定的参考价值,感兴
趣的小伙伴们可以参考一下
基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下
demo例子:
依赖文件:jqueryform
HTML文本内容:
<template>
<div id="accident">
<div class="wrapper">
<i class="icon-pic"></i>相关照片
<button type="button" @click="change_input()">上传照片</button>
<form id="addTextForm" @change="setImg($event)">
</form>
</div>
<div id="img-wrapper" @click="deleteImg($event)"></div>
<P class="btn-wrapper">
<mt-button type="primary" @click="submit()">提交</mt-button>
</P>
</div>
</template>
JS文本内容:
<script>
/**
* 从 file 域获取 本地图片 url
*/
function getFileUrl(obj) {
let url;
url = window.URL.createObjectURL(obj.files.item(0));
return url;
}
export default {
name: 'accident',
// 定义数据
data () {
return {
imgNum:4, //上传的照片数量,可根据实际情况自定义
}
},//定义事件
methods:{
//根据点击上传按钮触发input
change_input(){
let inputArr=$('#addTextForm input');
let add_inputId=''; //需要被触发的input
for(let i=0;i<inputArr.length;i++){
// 根据input的value值判断是否已经选择文件
评论0