Vue 组件化 upload 图片上传组件

##今天把部分代码进行组件化了
这是一个图片上传组件
组件名为upload 通过这个组件可以上传图片给服务器

<template>
  <div>
    活动封面：
    <input
      type="file"
      accept="image/*"
      @change="changeImage()"
      ref="avatarInput"/>
    <div class="pic_list_box">
      <div class="pic_list" v-show="imgDatas.length">
        <div v-for="(src,index) in imgDatas" :key="index">
          <!-- <img :src="src" width="80" height="80" alt srcset /> -->
          <!-- 利用element-ui的图片预览插件 -->
          <el-image
            style="width: 100px; height: 100px"
            :src="src"
            :preview-src-list="imgDatas">
          </el-image>
        </div>
      </div>
      <!-- 替换自己的上传图标 -->
    </div>
  </div>
</template>
<script>
    import {uploadPic} from "../api/basisMG"       //这里是引入了自定义的接口
    export default {
    name:'upload',
      data() {
        return {
          imgDatas: []
        }
      },
      methods: {
        changeImage() {
          // 上传图片事件
          var files = this.$refs.avatarInput.files;
          var that = this;
          function readAndPreview(file) {        
            //Make sure `file.name` matches our extensions criteria
            if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
              var reader = new FileReader();
              reader.onload = function(e) {
                // 防止重复上传
                if (that.imgDatas.indexOf(e.target.result) === -1) {
                  that.imgDatas.push(e.target.result);
                }
              };
              reader.readAsDataURL(file);
            }
          }
          readAndPreview(files[0])
          if (files.length === 0) {
            return;
          }
          
          // 文件上传服务器
          this.setUploadFile(files[0])
          
        },
        setUploadFile(file) {
          var fd = new FormData()
          var str = "http://circlepro.cn/media/" //因为后端返回的是相对路径，所有在这里做了字符串的拼接
          fd.append('pic', file) // 添加到请求体
          uploadPic(fd)                             //这是发送请求的接口 这里用的是POST接口
          .then(res=>{
            console.log(res)
            var src = str + res.data
            console.log(src)
            this.$emit('changeImg', src);
          })
        },
        upLoad() {
          // 触发上传图片按钮
          this.$refs.avatarInput.dispatchEvent(new MouseEvent("click"));
        }
      }
    };
</script>
  <style>
  .pic_list_box {
    display: flex;
  }
  .upload_btn {
    width: 100px;
    height: 100px;
    padding-left: 15px;
  }
  .pic_list {
    display: flex;
  }
  </style>

以上是组件的代码
下面是引用的代码

HTML:
<upload @changeImg="changeImg"></upload> //这里是调用了这个接口
javaScritp
	Methods:
	{
	    changeImg(val){
	      this.bannerDetail.image = val  把图片的地址赋给image      这里的val就是上面传值的src
	      console.log(val)
	    },
	 }

最后是给一下整个项目的地址 是一个后台管理系统
基于Vue vuex 和 route
git地址为git地址
如果有需要可以使用