Element UI文件拖拽上传至oss（结合vxe弹框）

<el-button size="small"
                   type="primary"
                   @click="addFile()">新增文件</el-button>
 <vxe-modal ref="xModal"
               v-model="attachment"
               row-id="id"
               title="上传文件"
               width="390px"
               resize
               destroy-on-close
               :show-footer="true"
               keep-source
               :scroll-x="{ enabled: false }">
      <template #default>
        <el-upload class="upload-demo"
                   drag
                   action="#"
                   :http-request="(file)=>uploadfile()"
                   :before-upload="beforeUpload"
                   :on-success="upSuccess"
                   :on-error="upError"
                   :fileList="fileList"
                   :multiple="false"
                   :on-exceed="handleExceed"
                   :limit="1">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
        </el-upload>
      </template>
      <template #footer>
        <el-button size="small"
                   @click="attachment = false">取消</el-button>
        <el-button size="small"
                   @click="confirmUpload"
                   type="primary">确定</el-button>
      </template>
    </vxe-modal>

//oss.js
//参考 https://help.aliyun.com/document_detail/111266.html?spm=a2c4g.11186623.6.1096.24133a07yYS27X
let OSS = require('ali-oss');
const path = require("path")
const oss = new OSS({
  region: "oss-cn-shanghai",
  accessKeyId: 'accessKeyId值',
  accessKeySecret: 'accessKeySecret值',
  bucket: 'xxx'
});
async function put(fileName, file) {
  try {
    const result = await oss.put(fileName, file);
    console.log(result)
    return 'https://xxx.oss-cn-shanghai.aliyuncs.com/' + result.name;
  } catch (e) {
    console.log(e);
  }
}

export {
  put
}

import { put} from "@/utils/oss";
export default {
  name: "fileManagement",
  components: {
    BaseTable
  },
  data () {
    return {
      fileList: [],
      fileName: "", //上传的文件名
      attachment: false
    };
  },
  methods: {
    // 文件上传之前
    async beforeUpload (file) {
      console.log(this.fileList);
      let Rmvb = file.name.substring(file.name.lastIndexOf(".") + 1); //文件后缀
      let fileName = file.name;
      let typeInfo = ["xls", "xlsx", "csv"];
      let status = true;
      if (!typeInfo.includes(Rmvb)) {
        this.$message({
          type: "error",
          message: "请上传xls、xlsx、csv格式的文件"
        });
        status = false;
      }
      return status;
    },

    // 上传成功
    upSuccess (res) {
      this.$message({
        type: "success",
        message: "上传成功",
        showClose: true,
        offset: 80
      });
    },
    // 上传失败
    upError () {
      this.$message({
        type: "error",
        message: "上传失败",
        showClose: true,
        offset: 80
      });
    },
    // 新增文件
    addFile () {
      this.attachment = true;
    },
    //确定上传
    async confirmUpload () {
      console.log(this.fileList);
      for (var i = 0; i < this.fileList.length; i++) {
      //上传至oss(这里封装了put上传)
        const path = "highRiskSamplingExcelPath/";
        let fileName = await put(
          path + this.fileList[i].name,
          this.fileList[i]
        );
        this.fileName = this.fileList[i].name;
      }
      //请求接口上传至数据库(axios二次封装)
      let params = {
        requestType: "parseCostExcel",
        fileName: this.fileName,
      };
      let res = await this.$api.highRisk(params);
      if (res.successful) {
        this.$message({
          type: "success",
          message: "上传成功"
        });
        this.fileList=[]
        this.attachment = false;
        this.getList();
      }
    },
    uploadfile () { },
    //文件超出个数限制时
    handleExceed (files, fileList) {
      this.$message.warning(`只能选择 1 个文件`);
    }, 
  }
};