实现上传图片其实很简单,本文章是使用的input的file属性来实现上传图片的。
HTML代码:
<div class="upload-img">
<ul class="upload-list">
<li v-for="(item, index) in picList" :key="index">
<img :src="item" alt="" />
<div class="caozuo">
<i
@click="deleteImg(item, index)"
class="el-icon-delete"
></i>
</div>
</li>
<li
style="border: 1px solid black"
class="add-img el-icon-plus"
>
<input @change="fileChange" type="file" />
<i v-if="!loading" class="iconfont icon-tianjia"></i>
<i v-else class="iconfont loading icon-jiazai"></i>
</li>
</ul>
<div
class="preview-box"
v-if="ispreview"
@click.self="ispreview = false"
>
<img :src="previewItem" alt="" />
</div>
</div>
JS代码:
data(){
return{
picList:[],//这里是要显示的图片集合
loading: false, //加载效果
ispreview: false, //是否打开预览
ary[]//上传的图片集合
}
},
methods:{
fileChange(e){
var file=e.target.files[0];//要上传的图片
this.ary.push(file);//每次上传的图片都push到一个数组里
//想要给后台发送图片可以使用formData来实现
var formdata=new FormData();
formdata.append('图片的字段名',file);
//在这里发送接口
},
deleteImgq(item, index) {
this.picList.splice(index, 1);
//实现点击删除图片
}
}
…以上就是实现一个简单上传图片的代码了,有什么问题可以随时问我~