element-ui-——el-uploadexcel導入

佈局文件：（選擇文件放在了彈框內部——即點擊導入按鈕後彈框顯示，先下載模板再選擇文件點擊提交按鈕才上傳）

<div class="emImport_container">
 <el-dialog :title="meta.title" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
 <el-upload
 :ref="system_id"
 v-loading="uploadLoading"
 class="upload-demo"
 :action="action" （action: 導入文件的url地址）
 :on-preview="handlePreview"
 :on-remove="handleRemove"
 :file-list="fileList"
 :headers="headers" (headers: 請求頭)
 name="file" (文件名)
 accept=".xlsx "
 :on-error="uploadFileError"
 :on-success="uploadFileSuccess"
 :auto-upload="false"
 :http-request="uploadFile"
 :on-change="fileChange"
 >
 <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
 <el-button style="margin-left: 10px;" size="small" type="success" @click="downloadModel">下載模板</el-button>
 <div slot="tip" class="el-upload__tip">請先下載模板，再選擇文件上傳！</div>
 </el-upload>
 <div slot="footer" class="dialog-footer">
 <el-button class="em-button" @click="cancelUpload">取 消</el-button>
 <el-button type="primary" class="em-button" @click="submitUpload">提交</el-button>
 </div>
 </el-dialog>
</div>

 模板下載及文件導入：

<script>
import vueBus from '@/utils/vueBus'
import { emMixin } from '@/utils/mixins'
import { dataInitFn, childrenInitFn } from '@/utils/tool'
import { uploadFile } from '@/api/schoolService/parentInfo'
export default {
  name: 'EmImport',
 mixins: [emMixin],
 data() {
    return {
      set: {
        downloadUrl: '', // 模板下載url地址
 importUrl: ''// 導入文件url地址
 },
 fileList: [], // 文件列表
 dialogFormVisible: false,
 headers: {
 'Content-Type': 'multipart/form-data'
 },
 uploadLoading: '',
 action: '',
 files: [] // 選擇文件
 }
  },
 created() {
    this.init()
  },
 methods: {
    init() {
      this.set = dataInitFn(this.set, this.meta)
      this.children = childrenInitFn(this.children, this.componentData)
    },
 handleRemove(file, fileList) {
      console.log(file, fileList)
    },
 handlePreview(file) {
      console.log(file)
    },
 uploadFileError(err, file, fileList) {
      console.log(err)
      this.$message.error('文件導入失敗')
    },
 uploadFileSuccess(response, file, fileList) {
      console.log(response.data.jsonmsg.ERRORMSG)
      if (response.data.jsonmsg.ERRORMSG === '') {
        this.$message({
          message: '恭喜你，導入成功',
 type: 'success'
 })
        this.init()
        this.dialogFormVisible = false
 } else {
        this.$message({
          message: response.data.jsonmsg.ERRORMSG.slice(response.data.jsonmsg.ERRORMSG.indexOf('=') + 1),
 type: 'error'
 })
      }
    },
 downloadModel() { // 下載導出須要的模板
 window.location.href = process.env.VUE_APP_BASE_API + this.set.downloadUrl // process.env.VUE_APP_BASE_API :基礎地址（env.development文件中的 base api地址
）

 },
 // 導入csv
 import() {
      this.dialogFormVisible = true
 this.action = process.env.VUE_APP_BASE_API + this.set.importUrl // 尤其重要，不然action是沒有值的
 },
 fileChange(file) {
      this.files.push(file.raw) // 上傳文件變化時將文件對象push進files數組
 },
 // 上傳文件
 uploadFile(params) {
      if (this.files) {
        const formData = new FormData() // new一個formData對象
        this.files = params.file （這裏必定是params.file,傳遞給後臺的應是file:(binary)； 不是this.files,,不然傳遞給後臺的是file:Undefined）
 formData.append('file', this.files)
        uploadFile({
          url: process.env.VUE_APP_BASE_API + this.set.importUrl, //導入文件地址
 params: formData （參數必須是formData）
        }).then(response => {
          console.log('導入結果', response)
          if (response.statusCode === 200) {
            this.$notify({
              message: '數據導入成功',
 type: 'success'
 })
            this.dialogFormVisible = false
 vueBus.$emit('query')
          } else {
            this.$notify.error('數據導入失敗')
          }
        })
      }
    },
 submitUpload(event) {
      this.$refs[this.system_id].submit() // 提交按鈕
    },
 cancelUpload() {
      this.dialogFormVisible = false
 this.$message.info('已取消上傳')
    }
  }
}
</script>

接口地址：

export function uploadFile(obj) {
  return request({
    url: obj.url,
    method: 'post',
    data: obj.params
  })
}

總結：請求頭格式必定是：content-Type:multipart/form-data; 不然導入會失敗；傳遞的參數：params必定是formData(表單對象)