具体需要场景如下：

抉择须要上传的excel文件后，要把文件手动上传到后盾服务器，并将导入成功失败的统计结果显示进去。官网也有手动上传的示例，通过 action="url" 传入地址的形式，但在理论我的项目中申请须要本人配置，上面具体阐明实现的办法。

阐明：

  • 在上传文件到展现统计后果，咱们后端给了两个接口：首先调用文件上传接口，上传胜利后，依据后端返回的 mark 再调用统计后果接口，而后展现返回的响应后果。
1、属性设置

.vue文件

<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">抉择文件</el-button>            <div slot="tip" class="el-upload__tip">一次只能上传一个xls/xlsx文件，且不超过10M</div>        </el-upload>    </div></el-row><el-row>    <el-button size="small" @click="closeDialog">取 消</el-button>    <el-button type="primary" size="small" @click="submitUpload">上 传</el-button>    <el-button type="primary" size="small" @click="downloadRes">下载反馈后果</el-button></el-row>
2、解决逻辑

逻辑解决代码如下：

methods: {    // 上传文件之前的钩子：判断上传文件格式、大小等，若返回false则进行上传    beforeUpload(file) {        //文件类型        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('上传文件只能是xls/xlsx格局！')        }        // 文件大小限度为10M        const fileLimit = file.size / 1024 / 1024 < 10;        if(!fileLimit) {            this.$message.error('上传文件大小不超过10M！')        }        return fileType && fileLimit    },    // 自定义上传办法，param是默认参数，能够获得file文件信息，具体信息如下图    uploadHttpRequest(param) {        const formData = new FormData() //FormData对象，增加参数只能通过append('key', value)的模式增加        formData.append('file', param.file) //增加文件对象        formData.append('uploadType', this.rulesType)        const url = `${this.myBaseURL}/operation/ruleImport/importData` //上传地址        axios.post(url, formData)            .then( res => {                const { data: { code, mark } } = res                if(code === 0) {                    param.onSuccess()  // 上传胜利的文件显示绿色的对勾                    this.uploadMark = mark                }                return this.countData(this.uploadMark) //依据mark值调用统计后果接口，返回一个promise以便进行链式调用            })            .then( res => { //链式调用，调用统计后果的响应                const { data: { code, data } } = res                if(code === 0) {                    console.log('统计后果', data)                }            })            .catch( err => {                console.log('失败', err)                param.onError() //上传失败的文件会从文件列表中删除            })    },    // 统计后果    countFile(mark) {        return new Promise((resolve, reject) => {            axios                .get(`/operation/ruleImport/countData?mark=${mark}`)                .then(res => {                    resolve(res)                })                .catch(error => {                    reject(error)                })        })    },    // 点击上传：手动上传到服务器，此时会触发组件的http-request    submitUpload() {        this.$refs.upload.submit()    },    // 文件产生扭转    fileChange(file, fileList) {        if (fileList.length > 0) {            this.fileList = [fileList[fileList.length - 1]] // 展现最初一次抉择的文件        }    },    // 移除抉择的文件    fileRemove(file, fileList) {        if(fileList.length < 1) {            this.uploadDisabled = true //未抉择文件则禁用上传按钮        }    },    // 勾销    closeDialog() {        this.$refs.upload.clearFiles() //革除上传文件对象        this.fileList = [] //清空抉择的文件列表        this.$emit('close', false)    }}

http-request 的 param 参数，打印后果如图。可通过 param.file 获取以后文件对象。

好了，以上就是我手动上传文件的一个实现，但还有一些细节要欠缺，比方：上传时按钮显示加载状态；上传文件胜利后展现列表不容许点击 X 删除等等，大家可依据本人的需要进行调整，谢 :)~~