element Upload上传

上传文件放在public文件夹下

 

 

 

 

 

 

 <el-button type="primary" size="medium" icon="el-icon-upload2" style="margin-left: 20px;" @click.native="handleUpload('student')">批量导入</el-button>

export default {
  data() {
    return {
     dialogUploadVisible: false,
      uploadType: '',
      downType: ''
    }
  }
}

    <el-dialog :title="`批量导入`" :visible.sync="dialogUploadVisible" width="600px">
      <a class="loadMould el-button--medium el-button--primary" :href="handleDownload()" :download="downType">
        <i class="el-icon-download" /> 下载导入模板 </a>
      <el-upload
        ref="uploadfile"
        drag
        :limit="1"
        :auto-upload="false"
        accept=".xlsx"
        action="customize"
        :http-request="httpRequest"
        style="margin-top:20px"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过10M</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUploadVisible = false">取 消</el-button>
        <el-button type="primary" :loading="btnloading" @click="submitFileForm">立即上传</el-button>
      </span>
    </el-dialog>

 // 批量导入
    handleUpload(type) {
      this.dialogUploadVisible = true
      this.uploadType = type
      if (type == 'project') {
        this.downType = '导入模板1.xlsx'
      } else {
        this.downType = '导入模板2.xlsx'
      }
    },
    // 下载模板
    handleDownload() {
      const url = '/download/' + this.downType
      return 'http://' + window.location.host + url
    },

    // 自定义上传
    httpRequest(file) {
      const extension = file.file.name.substring(file.file.name.lastIndexOf('.') + 1)
      const size = file.file.size / 1024 / 1024
      if (extension !== 'xlsx') {
        msgError('只能上传后缀是.xlsx的文件')
        return false
      }
      if (size > 10) {
        msgError('文件大小不得超过10M')
        return false
      }
      const form = new FormData()
      form.append('file', file.file)
      form.append('userId', this.$store.state.user.userId)
      this.btnloading = true
      if (this.uploadType == 'project') {
        uploadGeneralItem(form).then(res => {
          msgSuccess('上传成功')
          this.btnloading = false
        }).catch(() => {
          this.btnloading = false
        })
      } else {
        uploadControlItem(form).then(res => {
          msgSuccess('上传成功')
          this.btnloading = false
        }).catch(() => {
          this.btnloading = false
        })
      }
    },
　　//立即上传
    submitFileForm() {
      this.$refs.uploadfile.submit()
      this.dialogUploadVisible = false
      if (this.uploadType == 'project') {
        this.queryProjectParams.pageIndex = 1
        this.getProjectTableData() 
      } else {
        this.queryStudentParams.pageIndex = 1
        this.getStudentTableData() 
      }
    }

api

export function uploadControlItem(data) {
  return request({
    url: '/feeitem/uploadControlItem',
    method: 'post',
    data
  })
}