The import

An example is shown below:

The type of file received by the back end is file stream. Here, js FormData interface is needed. Please refer to new FormData() for details.

Front-end construction parameter code:

const formData = new FormData();
formData.append('docFile', file); // file indicates the uploaded file
formData.append('otherParams', otherParams); // Continue adding other parameters in append mode
httpImport(formData) // Use formData as the interface to request the required parameters to implement import function
Copy the code

Upload a file stream using Element UI’s el-Upload component

View section:

<el-dialog title="Import" :visible.sync="dialogVisible" width="30%">
      <el-upload
        ref="upload"
        action="#"
        accept=".xls,.xlsx"
        :auto-upload="false"
        :multiple="false"
        :http-request="importHttpRequest"
        :file-list="fileList"
        :on-change="fileChange"
        :show-file-list="true"
        >
        <el-button type="text">Select file import</el-button>
        <div slot="tip" class="el-upload__tip">Only one XLS/XLSX file can be uploaded at a time</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Take away</el-button>
        <el-button type="primary" @click="handleSubmitImport">determine</el-button>
      </span>
</el-dialog>
Copy the code

Js:

/ / import
importHttpRequest (params) {
  const formData = new FormData()
  formData.append('file', params.file)
  formData.append('otherParams'.this.otherParams) // Add other interface requirements
  httpImportData(formData).then(res= > {
    this.$message({
      type: 'success'.message: 'Import successful'
    })
    this.dialogVisible = false
    this.fileList = []
  })
},
handleSubmitImport () {
  this.$refs.upload.submit()
}
Copy the code

export

The basic code is as follows:

this.$axios({
  method: 'post',
  url,
  headers: { Authorization: Cookies.get('token')},responseType: 'arraybuffer'.// This parameter should be added
  data
}).then(res= > {
  const fileName = decodeURIComponent(
    res.response.headers
      .get('Content-Disposition')
      .split("filename*=utf-8''") [1]);const url = window.URL.createObjectURL(new Blob([res.data]), {
    type: res.response.headers.get('Content-Type')});const link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
})
Copy the code