前端vue3 上传/导入文件 调用接口

• 点击按钮导入：

		   <el-uploadaction="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15":auto-upload="false":on-change="handleFileChange":show-file-list="false"><el-button type="warning" plain icon="Upload">导入</el-button></el-upload>

• 可拖拽，区域点击导入：

    	  <el-uploadstyle="width: 100%"dragaction="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15":auto-upload="false":on-change="handleFileChange":show-file-list="false"><upload-filled style="width: 40px;height: 40px"/><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传xlsx文件</div></el-upload>

• 选择文件后调用接口getImport，把formData类型文件传给后端

/** 按钮操作 */
const handleFileChange = (file) => {// 检查文件格式是否为 .xlsxif (!file.name.endsWith('.xlsx')) {proxy?.$modal.msgWarning("只能上传 .xlsx 格式的文件");return;}// 转为formDataconst formData = new FormData();formData.append('file', file.raw);getImport(formData).then((response) => {console.log('上传成功:', response);//刷新列表handleQuery();}).catch((error) => {console.error('上传失败:', error);});
};

/*** 上传文件*/
export function getImport(formData) {return request({url: '/ceshi/upload',method: 'post',data: formData,});
}