vue开发简单上传图片功能-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/93198417

本文介绍了如何在Vue项目中实现简单的图片上传功能，主要代码参考了之前基于jQuery的实现，并提供了完整代码链接以及Vue相关技巧的专栏链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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上传图片代码更改完整代码：https://blog.youkuaiyun.com/qq_42221334/article/details/84827369

更多技巧请查看vue专栏 https://blog.youkuaiyun.com/qq_42221334/column/info/27230/1