vue上传文件到php,Antd Upload组件上传文件至php后端, php拿到对应的文件名(二: vue实现)...

组件文件: UploadFile.vue

{{ title }}

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.`)

}

}

}

}

组件调用者: index.vue

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('谢谢, 成功了')

}

}

}

后端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并没有起作用, 除非改为自己手动实现!