elementui如何读取上传文件

ElementUI可以通过el-upload组件进行文件上传，具体实现方式如下：

1.在Vue文件中引入ElUpload组件

import { ElUpload } from 'element-ui';

2.在模板中使用ElUpload组件，并设置相关属性

<el-upload
class="avatar-uploader"
action="/upload"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

其中，class属性用于设置样式，action属性为上传文件的接口地址，show-file-list属性表示是否显示文件列表，on-success属性为上传成功后的回调方法，before-upload属性为上传前的校验方法。

3.在Vue文件中实现handleSuccess和beforeAvatarUpload方法

handleSuccess方法用于在文件上传成功后将文件的下载链接保存到data中，beforeAvatarUpload方法用于在上传前对文件进行校验，例如文件大小和类型等。

methods: {
handleSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.fileUrl = res.url;
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;

if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}

通过以上三个步骤，就可以实现使用ElementUI上传文件的功能。