Detailed explanation of Vue ElementUI manually uploading excel files to the server

<el-row>
    <div class="el-form-item__content">
        <el-upload ref="upload"
            accept=".xls,.xlsx"
            action="#"
            :auto-upload="false"
            :multiple="false"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :http-request="uploadHttpRequest"
            :on-remove="fileRemove"
            :on-change="fileChange">
            <el-button size="small" type="primary">Select file</el-button>
            <div slot="tip" class="el-upload__tip">Only one xls/xlsx file can be uploaded at a time, and the file size should not exceed 10M</div>
        </el-upload>
    </div>
</el-row>
<el-row>
    <el-button size="small" @click="closeDialog">Cancel</el-button>
    <el-button type="primary" size="small" @click="submitUpload">Upload</el-button>
    <el-button type="primary" size="small" @click="downloadRes">Download feedback results</el-button>
</el-row>

methods: {
    // Hook before uploading files: determine the format and size of the uploaded file, and stop uploading if false is returned beforeUpload(file) {
        //File type const isType = file.type === 'application/vnd.ms-excel'
        const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        const fileType = isType || isTypeComputer
        if(!fileType) {
            this.$message.error('Uploaded files can only be in xls/xlsx format!')
        }

        // The file size limit is 10M
        const fileLimit = file.size / 1024 / 1024 < 10;
        if(!fileLimit) {
            this.$message.error('The uploaded file size does not exceed 10M!');
        }
        return fileType && fileLimit
    },
    // Custom upload method, param is the default parameter, you can get the file information, the specific information is as follows uploadHttpRequest(param) {
        const formData = new FormData() //FormData object, adding parameters can only be done through append('key', value) formData.append('file', param.file) //Add file object formData.append('uploadType', this.rulesType)
        const url = `${this.myBaseURL}/operation/ruleImport/importData` //Upload address axios.post(url, formData)
            .then( res => {
                const { data: { code, mark } } = res
                if(code === 0) {
                    param.onSuccess() // Successfully uploaded files display a green check mark this.uploadMark = mark
                }
                return this.countData(this.uploadMark) //Call the statistics result interface according to the response mark value and return a promise for chain call})
            .then( res => { //Chain call, response to statistical results const { data: { code, data } } = res
                if(code === 0) {
                    console.log('Statistical results', data)
                }
            })
            .catch( err => {
                console.log('failed', err)
                param.onError() //Files that failed to upload will be deleted from the file list})
    },
    // Statistical results countFile(mark) {
        return new Promise((resolve, reject) => {
            axios
                .get(`/operation/ruleImport/countData?mark=${mark}`)
                .then(res => {
                    resolve(res)
                })
                .catch(error => {
                    reject(error)
                })
        })
    },
    // Click to upload: Manually upload to the server, which will trigger the component's http-request
    submitUpload() {
        this.$refs.upload.submit()
    },
    // The file changes fileChange(file, fileList) {
        if (fileList.length > 0) {
            this.fileList = [fileList[fileList.length - 1]] // Display the last selected file}
    },
    // Remove the selected files fileRemove(file, fileList) {
        if(fileList.length < 1) {
            this.uploadDisabled = true // Disable the upload button if no file is selected}
    },
    //Cancel closeDialog() {
        this.$refs.upload.clearFiles() //Clear uploaded file object this.fileList = [] //Clear the selected file list this.$emit('close', false)
    }
}