vue封装一个上传文件组件

1，新建一个upload.vue

<template>
  <div>
    <!-- 文件上传start -->
    <el-upload
      drag
      :limit="limitNum"
      :auto-upload="false"
      accept=".xlsx"
      :action="UploadUrl()"
      :before-upload="beforeUploadFile"
      :before-remove="beforeRemove"
      :on-change="fileChange"
      :on-exceed="exceedFile"
      :on-success="handleSuccess"
      :on-error="handleError"
      :filelist="fileList"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传xlsx文件，且不超过10M</div>
    </el-upload>
    <!-- <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
          <el-button size="small"  @click="dialogVisible = false">取消</el-button> -->
    <!-- 文件上传 end-->
  </div>
</template>
<script>
export default {
  props: ["Urldata"],
  data() {
    return {
      formselect: {},
      //文件上传
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      fileList: [], // excel文件列表
      dialogVisible: true, //数据导入弹框显隐
      title: "", //弹框标题
      dialog: false, //抽屉弹框显隐
      // 表单
    };
  },
  created() {
    console.log(this.Urldata);
    // this.GetProjectList()
  },
  mounted() {},
  methods: {
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },
    // 文件状态改变时的钩子
    fileChange(file) {
      debugger;
      this.fileList = file.raw;
      this.$emit("getUrl", this.fileList);
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      console.log("before upload");
      console.log(file);
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xls") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      debugger;
      this.$message.success("文件上传成功");
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      debugger;
      this.$message.error("文件上传失败");
    },
    UploadUrl: function () {
      // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
      return "";
    },
    beforeRemove(file, fileList) {
      this.fileList = fileList;
    },
    uploadFile(Urldata) {
      debugger;
      if (this.fileList == "") {
        this.$message.warning("请上传文件");
      } else {
        var form = new FormData();
        form.append("file", this.fileList);
        form.append("tableName", Urldata.tableName);
        form.append("type", Urldata.type);
        debugger;
        console.log(form);
        this.$axios({
          method: "post",
          url: Urldata.url,
          headers: {
            "Content-type": "multipart/form-data",
          },
          data: form,
        }).then(
          (res) => {
            debugger;
          },
          (err) => {}
        );
      }
    },
    //文件上传关闭
    handleClosetwo(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  watch: {
    Urldata: {
      handler: function () {
        this.uploadFile(this.Urldata);
        //do something
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
</style>

2,引用upload.vue
2.1html部分

     <uploadimg
              @getUrl="getUrl"
              :Urldata="Urldata"
              :limit="3"
            ></uploadimg>

2.2js部分

import pagination from "../../components/Module/paginate.vue";//引用
 components: { pagination, uploadimg },//注册
  Urldata: {}, // excel文件列表

2.3调用只需要给Urldata赋值，会自动调用组件的监听事件，从而触发上传
 this.Urldata={url:'http://192.192.192.197:7005/api/eurekamedicalsystem/v1/medical-upload-file/uploadfile',tableName:'测试',type:'www.baidu.com3'}
2.3直接上传
    //函数
    getUrl(data1) {
      //获取上传的数据
      this.Urldata={url:'http://192.192.192.197:7005/api/eurekamedicalsystem/v1/medical-upload-file/uploadfile',tableName:'测试',type:'www.baidu.com3'}
    },