vue开发简单上传图片功能

139 阅读 0 评论 92 点赞

我是靠谱客的博主傲娇夕阳，最近开发中收集的这篇文章主要介绍vue开发简单上传图片功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了vue实现简单上传图片功能的具体代码，供大家参考，具体内容如下

vue简单的上传个图片的功能，主要代码：

<template>
<div class="plan_list">
    <div class="plan_name Upload_name">企业logo</div>
    <div class='Upload'>
     <input type="file" name="pclogo" id="xdaTanFileImg" @change="xmTanUploadImg()" ref='box' accept="image/*">
     <img src="../../static/img/Authentication/shxy.jpg" class="img-circle img-thumbnail img-responsive" id="avarimgs">
    </div>
   </div>
</template>
 
 
<script>
export default {
 name: "feedShopping",
 data() {
  return {}
 },
  
 methods: {
 
//上传图片
  xmTanUploadImg(){
 
   var obj=this.$refs.box;//获取元素的dom
   var file = obj.files[0];        
   var reader = new FileReader();
   reader.onload = function (e) {
 
    var img = document.getElementById("avarimgs");//获取图片id
 
    img.src = e.target.result;//给图片src路径赋值
 
    //重要：这里可以把获取的src路径的 base64 格式的图片传给后端即可
   }
   
   reader.readAsDataURL(file)
  },
}
<script>
 
 
 
<style scoped>
#avarimgs,#xdaTanFileImg{
 width: 0.8rem;
 height: 0.8rem;
 border-radius: 0.1rem;
 margin: 0.1rem 0;
 float: right;
}
#xdaTanFileImg{
 position: absolute;
 top: 0;
 right: 0;
 opacity: 0;
}
.Upload_name{
 line-height: 1rem;
}
 
</style>

参照之前发布的 jquery上传图片代码更改完整代码

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