您的位置：首页 > Web前端 > Vue.js

基于VUE选择上传图片并页面显示（图片可删除）

2017-05-25 12:07 1046 查看

基于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值判断是否已经选择文件
if(!inputArr[i].value){ //如果没有选择,获得这个input的ID
add_inputId=inputArr[i].id;
break;
}
}
if(add_inputId){ //如果需要被触发的input ID存在,将对应的input触发
return $("#"+add_inputId).click();
}else{
alert("最多选择"+this.imgNum+"张图片")
}
},
//当input选择了图片的时候触发,将获得的src赋值到相对应的img
setImg(e){
let target=e.target;
$('#img_'+target.id).attr('src',getFileUrl(e.srcElement));
},
//点击图片删除该图片并清除相对的input
deleteImg(e){
let target=e.target;
let inputID=''; //需要清除value的input
if(target.nodeName=='IMG'){
target.src='';
inputID=target.id.replace('img_',''); //获得需要清除value的input
$('input#'+inputID).val("");
}
},
//提交信息到后台
submit(){
$("#addTextForm").ajaxSubmit({
url: this.$root.api+"/Index/staff_accident/add",
type: "post",
data: {
'total_price':this.price,
'descript':this.descript,
},
success: (data) => {
if(data.code==0){
console.log(‘提交成功');
}else{
alert('提交失败');
}
}
});
}
},
//页面加载后执行
mounted(){
for(let i=0;i<this.imgNum;i++){
//生成input框，默认为1
let my_input = $('<input type="file" name="image" />'); //创建一个input
my_input.attr('id',i); //为创建的input添加id
$('#addTextForm').append(my_input); //将生成的input追加到指定的form
//生成img，默认为1
let my_img = $('<img src="">');
my_img.attr('id', 'img_'+i);
my_img.css({"max-width":"50%","max-height":"200px"});
//添加样式，由于vue的执行机制，页面加载的时候img标签还没有生成，直接写在style样式会不生效
$('#img-wrapper').append(my_img);
}
},
}
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 上传

相关文章推荐

新的分享

章节导航