vue中element-ui文件拖拽上传

 <!--上传文件弹窗-->

      <el-dialog

          title="导入文件"

          name="上传的文件"

          :visible.sync="uploadFileDialog"

          :modal-append-to-body="false"

          width="573px">

        <el-row>

          <el-col :span="16" :offset="4">

            <el-upload

                drag

                :multiple="false"

                :http-request="uploadFile"

                action="">

              <i class="el-icon-upload"></i>

              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

              <div class="el-upload__text">只能上传xls/xlsx文件</div>

            </el-upload>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="16" :offset="4">

            <span style="margin: 10px 0">模板文件下载：<el-link type="primary" :href="templateUrl">下载</el-link></span>

          </el-col>

        </el-row>

        <span slot="footer" class="dialog-footer">

          <el-button @click="uploadFileDialog = false">取 消</el-button>

          <el-button type="primary" @click="studentImport" :disabled="nextStep">下一步</el-button>

        </span>

      </el-dialog>

 export default {

    data() {

      return {

        uploadFileDialog: false,

        }

   }

    methods: {

      // 弹出上传文件dialog，并获取下载模板链接

      openUploadFileDialog() {

        this.uploadFileDialog = true

        templateDownLoad({

          type: '1',

        })

          .then(res => {

            if(res.error === '0') {

              this.templateUrl = res.result

            }

            else {

              this.$message.error(res.msg);

            }

          })

          .catch(err => {

            this.$message.error(err.message);

          });

      },

      // 校验文件格式并上传文件

      uploadFile(event) {

        let formData = new FormData()

        let file = event.file

        let fileFormat = file.type.substr(file.type.lastIndexOf(".") + 1)

        const isXls = fileFormat === "ms-excel" || fileFormat === "sheet"

        if (!isXls) {

          this.$message.warning("上传文件格式只能是 XLS或XLSX格式!");

          return;

        }

        formData.append('file', file)

        upload(`${apiUrl}Public/fileUpload.html`, formData, {

          headers: {"Content-Type": "multipart/form-data"}

        }, 1).then(response => {

          if (response.error) {

            if (response.result.done == '1') {

              this.$message.success("上传成功");

              this.nextStep = false

              this.fileName = response.result.file_name

            }

            else {

              this.$message.error(response.result.msg);

            }

          }

          else {

            this.$message.error('上传出错！');

          }

        });

      },

  };