vue文件上传组件，使用原生input file实现

vue 实现输入框右侧icon文件夹点击上传图片组件

a. 调用图片上传父组件
formData 就获取 图片上传组件传过来的地址。

// html

<upload-image v-model="formData" />

b. 图片上传组件

// html 
<template>
  <div>
    <el-input
      clearable
      v-model.trim="uploadImgUrl"
      size="mini"
      @change="changeInput"
    >
      <template slot="append">
        <i class="iconfont iconfolder-o"></i>
        <input type="file" class="file" ref="files" @change="getImages" />
      </template>
    </el-input>
  </div>
</template>

// js
import axios from "axios";
import {
    
     getToken } from "@/utils/auth";
export default {
    
    
  model: {
    
    
    prop: "value",
    event: "input"
  },
  props: {
    
    
    value: {
    
    
      type: "",
      default: ""
    }
  },
  data() {
    
    
    return {
    
    
      requestUrl: process.env.BASE_API + "/file/upload",
      headers: {
    
    
        Authorization: getToken()
      },
      fileList: [],
      uploadImgUrl: ""
    };
  },
  created() {
    
    
    this.uploadImgUrl = this.value;
  },
  methods: {
    
    
    getImages(el) {
    
    
      var file = el.target.files[0];
      var type = file.type.split("/")[0];
      if (type === "image") {
    
    
        this.upload(file);
      } else {
    
    
        this.$message.warn("只能上次图片格式");
      }
    },
    upload(imgUrl) {
    
    
      var that = this;
      var formdata = new FormData();
      formdata.append("file", imgUrl);
      axios
        .post(this.requestUrl, formdata, {
    
    
          headers: that.headers
        })
        .then(response => {
    
    
          let res = response.data;
          if (res.code == "200") {
    
    
            that.uploadImgUrl = res.data.urlPath;
            that.$emit("input", that.uploadImgUrl);
            that.$emit("change", that.uploadImgUrl);
          }
        });
    },
    changeInput(e) {
    
    
      if (e) {
    
    
        this.uploadImgUrl = e;
      } else {
    
    
        this.$refs.files.value = "";
        this.uploadImgUrl = "";
      }
      this.$emit("input", this.uploadImgUrl);
      this.$emit("change", this.uploadImgUrl);
    }
  }
};

// css

.file {
    
    
  position: absolute;
  width: 100%;
  padding: 100%;
  right: 0;
  top: 0;
  opacity: 0;
}