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


    组件文件: UploadFile.vue

    <template>
    	<a-upload
    		name="file"
    		:disabled="uploading"
    		:action="url"
    		v-bind="others"
    		:show-upload-list="false"
    		@change="change"
    	>
    		<a-button :loading="uploading">
    			<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 }) {
    			this.uploading = file.status === 'uploading'
    
    			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>
    

    在Upload组件的change事件中监测file.status,控制外层Upload和Button的状态,防止上传过程中还能再次触发文件上传!

     组件调用者: 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;
    		}
    	}
    
  • 相关阅读:
    矩阵树定理
    随机乱搞算法
    数学
    BZOJ——3412: [Usaco2009 Dec]Music Notes乐谱
    BZOJ—— 3402: [Usaco2009 Open]Hide and Seek 捉迷藏
    洛谷—— P2884 [USACO07MAR]每月的费用Monthly Expense
    洛谷—— P2417 课程
    洛谷—— P1577 切绳子
    COGS 2598. 美丽的感觉
    10.23 模拟赛
  • 原文地址:https://www.cnblogs.com/joeblackzqq/p/13040516.html
Copyright © 2020-2023  润新知