vue input file 上传图片

原始图

父组件：

<div class="my-basic">
    <my-basic :items="category[3].menu[0]"
               @uploadHeadImg="uploadHeadImg"
               @handleFile="handleFile"></my-basic>
   </div>

父组件js：

  import {uploadPicture} from "~/api/user";  引用接口方法
  export default {
  	methods: {
		// 个人设置--基本信息  打开图片上传
      uploadHeadImg() {
        this.$el.querySelector(".hiddenInput").click();
      },
      // 将头像显示
      handleFile(files) {
        //单文件上传  不用上传图片接口
        const reader = new FileReader();

        reader.onload = data => {
          let res = data.target
          this.category[3].menu[0].userInfo.avatar = res.result
        };

        reader.readAsDataURL(files[0]);

        // 多文件上传+接口
        let uploadData = new FormData()

        for (let i = 0; i < files.length; i++) {
          let file = files[i]
          if (file.size / (Math.pow(1024, 2)) > 2) {
            this.$notify.error({
              title: "错误",
              message: "不能上传大小超过2MB的图片"
            });
          } else {
            uploadData.append('file[]', file)
          }
        }

		//调用接口
        uploadPicture(uploadData).then(res => {
          this.category[3].menu[0].userInfo.avatar = getPicture + res.data.data.picture_ids[res.data.data.picture_ids.length-1]		//赋值   多张图片同时上传取最后一张
        })
      },
   }
}

子组件

<div class="set-avatar">
        <div class="avatar">
          <img :src="items.userInfo.avatar" alt="">
        </div>
        <dl class="upload-avatar"  @click.stop="$emit('uploadHeadImg')">
          <dt>
            <button>上传头像</button>
            <input multiple type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
          </dt>
          <dd>支持JPG、PNG等格式图片大小不超过2M</dd>
        </dl>
      </div>

js：

export default {
  props: ["items"],
  methods: {
    // 获取待上传文件
    handleFile(e) {
      let files = e.target.files;
      this.$emit('handleFile', files)
    },
  }
};

scss样式

.set-avatar {
      display: flex;
      align-items: center;
      padding-bottom: 40px;
      border-bottom: 1px solid #dfe4e8;

      .avatar {
        margin-right: 34px;

        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
        }
      }

      dl {
        dt {
          width: 60px;
          height: 24px;
          overflow: hidden;

          button {
            padding: 0 6px;
            height: 24px;
            background: #7888f2;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
          }
        }

        dd {
          font-size: 12px;
          color: #9194ab;
          margin-top: 21px;
        }
      }
    }

api文件夹下的user.js接口文件

// 上传图片
export const uploadPicture = data => {
  return axios.request({
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    url: 'picture',
    data,
    method: 'post'
  })
}

完成后的效果图