antd的Upload组件 在安卓机上直接打开相册

Posted 2023-04-25

参考技术A antd的Upload组件，每次用都觉得极其痛苦。

最近做了一个PC端的项目需要利用<Upload>上传照片。很多人在为了方便，在手机浏览器上登录系统并上传照片，然鹅Upload可以调摄像头、调文件、但是就是不能直接调用相册！

在我都想用antd-mobile重新实现一下的时候，大神加了两个参数直接搞定（至少搞定了手机端百度浏览器和UC浏览器）:

再次分享给大家，希望有所帮助~

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