el-upload 例程

el-upload是一个非常方便的vue上传组件，可以实现图片、视频、PDF等多种类型的文件上传。本例程将介绍el-upload组件的使用方法。

首先，需要在vue项目中安装element-ui组件库。然后，在需要使用上传功能的组件中引入el-upload组件。例如，如果需要在一个表单中上传图片，可以在该表单组件的template中加入如下代码：

<el-form-item label="上传图片">
<el-upload
class="avatar-uploader"
action="/api/upload"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:on-success="handleAvatarSuccess"
:on-error="handleAvatarError">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>

其中，el-upload包含了“上传表单”和“上传按钮”两个部分。其中，action属性需要设置为后端接口地址，例如/api/upload。before-upload属性可以设置上传前验证，例如文件大小、文件类型等。on-success属性可以设置上传成功后的回调函数。on-error属性可以设置上传失败后的回调函数。

最后，在methods中需要定义beforeAvatarUpload、handleAvatarSuccess和handleAvatarError三个方法。例如：

methods: {
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
},
handleAvatarSuccess(response, file) {
this.imageUrl = URL.createObjectURL(file.raw)
},
handleAvatarError(err, file) {
this.$message.error('头像上传失败，请重新上传！')
}
}

上述代码中，beforeAvatarUpload方法用于验证上传的图片是否符合要求，并返回验证结果；handleAvatarSuccess用于在上传成功后将图片预览；handleAvatarError用于在上传失败时提示错误信息。

综上所述，使用el-upload组件实现上传功能非常简单，只需要配置好各个参数和回调函数即可。