2023.11.14今天我学习了如何使用el-upload:

 <!--drag设置可拖动--><!--accept=".xlsx"设置上传的文件类型--><!--:limit=1上传文件的最大个数--><!--:auto-upload="false"是否在选取后直接上传--><!--:before-upload="beforeUploadFile"上传文件之前的钩子--><!--:on-change="fileChange"文件状态改变时的钩子--><!--:on-remove="fileRemove"文件列表移除文件时的钩子--><!--:on-exceed="exceedFile"文件超出个数限制--><!--:on-success="upload_success"文件上传成功的钩子--><el-form :model="formTable" enctype="multipart/form-data" methods="post"><el-form-item label="选择文件："><el-uploaddrag:limit=limitNumname="file"ref="upload"action="":http-request="dict_upload_request"accept=".xlsx":headers="headers":with-credentials="true":file-list="fileList":before-upload="beforeUploadFile":before-remove="beforeRemove":on-exceed="exceedFile":on-remove="fileRemove"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传xlsx文件，且上传数据尽量不超过1000条</div></el-upload></el-form-item></el-form>

如果后端接口是固定并且不需要携带参数就用action，如果是动态的就用http-request。

    // 自定义上传的方法dict_upload_request(item) {let formData = new FormData()formData.append('file', item.file)//上传的文件formData.append('status', 0)//携带的参数 参数名+值formData.append('name', '张三')//携带的参数 参数名+值dict_upload(formData).then(res => {this.$message({message: '上传成功！',type: 'success'})})},