Antd Upload组件上传文件至php后端, php拿到对应的文件名(二: vue实现)
Posted 清清飞扬
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Antd Upload组件上传文件至php后端, php拿到对应的文件名(二: vue实现)相关的知识,希望对你有一定的参考价值。
组件文件: UploadFile.vue
<template> <a-upload name="file" :action="url" v-bind="others" :showUploadList="false" @change="change"> <a-button> <a-icon type="upload" /> {{ title }} </a-button> </a-upload> </template> <script> export default { name: ‘FileImporter‘, props: { url: { type: String, required: true }, title: { type: String, required: false, default: ‘导入文件‘ }, others: { type: Object } }, data() { return { uploading: false } }, methods: { change({ file }) { if (file.status === ‘done‘) { const { response: { code, msg, data } } = file if (code === 0) this.$emit(‘ok‘, { code, msg, data }) else this.$message.warn(msg) } else if (file.status === ‘error‘) { this.$message.error(`${file.name} file upload failed.`) } } } } </script> <style></style>
组件调用者: index.vue
<template> <upload-file url="/api/login/upload" title="导入Excel文件" :others="others" @ok="ok" /> </template> <script> import UploadFile from ‘@/components/UploadFile‘ export default { components: { UploadFile }, data() { return { others: { accept: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel‘ // 限定上传excel文件 } } }, methods: { ok(res) { console.log(‘onOk: ‘, res) this.$message.success(‘谢谢, 成功了‘) } } } </script> <style></style>
后端php接口:
public function upload() { $file = $_FILES[‘file‘]; $path = $file[‘tmp_name‘]; $data = ExcelModule::loadFile($path); // 得到返回的数据 log_message($data); return result(0, ‘suc‘, $data); }
ExcelModule::loadFile实现:
/** * 读取excel文件数据, 返回array数据 * @param $filePath * @return array */ public static function loadFile(string $filePath) { try { $reader = PHPExcel_IOFactory::createReaderForFile($filePath); $excel = $reader->load($filePath); $sheet = $excel->getActiveSheet(); return $sheet->toArray(); } catch(Exception $e) { $msg = sprintf(‘读取excel文件失败: file=%s, errorMsg=%s‘, $filePath, $e->getMessage()); log_message($msg); return $msg; } }
因为用的是upload控件的自动上传事件,所以uploading并没有起作用, 除非改为自己手动实现!
以上是关于Antd Upload组件上传文件至php后端, php拿到对应的文件名(二: vue实现)的主要内容,如果未能解决你的问题,请参考以下文章
antd Upload组件 onChange接收不到后续状态的问题
Antd的Upload组件上传文件控制文件数量格式等,以及提交时如何获取文件
Antd的Upload组件上传文件控制文件数量格式等,以及提交时如何获取文件
AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为
富文本vue-quill-editor结合element UI--upload做图片上传至七牛云服务器(含node后端)