el-upload组件直接用接口调用

<template>
	<el-upload
              drag
              :action="url"
              :limit="1"
              ref="imgUrl"
              :headers="token"
              accept=".pdf, .doc, .docx, .rar,.zip,.exe,.pptx"
              :before-upload="beforeUpload"
              :file-list="ruleForm.fileList"
              :on-remove="handleRemove"
              list-type="text"
              :on-exceed="handleExceed"
              :on-success="successHandle"
              :data="requestParam"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">点击或文件拖拽到这里上传</div>
      </el-upload>
</template>
<script>
export default {
  name: "FileUpload",
  components: { },
  data() {
    return {
      ruleForm: {
        fileList: [],
      },
      url: "",// 后端给的接口上传地址
      token:  { Authorization: '具体的token值，请依据后端给的token' },// 设置上传的请求头部
      requestParam: { param: 12 },// 接口参数，file参数插件自动会添加，额外参数自己添加
    };
  },
  created() {
  },
  mounted() {},
  methods: {
    handleRemove(file, fileList) {
      console.log("删除文件");
      // 在此处调用具体的删除文件接口，删除需要的数据存储在this.ruleForm.fileList 里面
      this.ruleForm.fileList = [];
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `一次只能上传一个文件，本次选择了 ${files.length} 个文件，如果想要替换其他文件，请先将本次文件删除`
      );
    },
    successHandle(response, file, fileList) {
      console.log(response);// 接口请求的返回值
      console.log(file);
      console.log(fileList);
      this.ruleForm.fileList = response;
    },
    beforeUpload(file) {
    	var isLt10M = file.size / 1024 / 1024 < 10;
      	if (!isLt10M) {
        	this.$message({
          		message: "上传文件大小不能超过 10MB!",
         		type: "warning"
       		});
       	 return isLt10M;
      }
    },
  },
};
</script>