Element UI el-upload action 使用指南：上传文件到组件

el-upload action 是 element-ui 中的一个上传组件，用于上传文件。使用该组件的 API 有以下几个步骤：\n\n1. 在组件中引入 el-upload 组件和需要的其他组件：\n\njavascript\nimport { ElUpload, ElButton } from 'element-plus'\n\n\n2. 在组件的 data 属性中定义一个变量，用于保存上传成功后的文件路径：\n\njavascript\ndata() {\n return {\n imageUrl: '',\n }\n},\n\n\n3. 在组件的 template 中使用 el-upload 组件，并配置上传的相关属性：\n\nhtml\n<el-upload\n action="/upload"\n :on-success="handleSuccess"\n :before-upload="beforeUpload"\n :show-file-list="false"\n>\n <el-button>上传文件</el-button>\n</el-upload>\n\n\n其中，action 属性指定上传的 URL 地址，on-success 属性指定上传成功后的回调函数，before-upload 属性指定在上传之前的回调函数，show-file-list 属性用于控制是否显示上传文件列表。\n\n4. 在组件的 methods 属性中定义 handleSuccess 和 beforeUpload 函数：\n\njavascript\nmethods: {\n handleSuccess(response, file, fileList) {\n this.imageUrl = response.url;\n },\n beforeUpload(file) {\n const isJPG = file.type === 'image/jpeg';\n const isPNG = file.type === 'image/png';\n const isLt2M = file.size / 1024 / 1024 < 2;\n\n if (!isJPG && !isPNG) {\n this.$message.error('只支持jpg/png格式的图片');\n }\n if (!isLt2M) {\n this.$message.error('上传图片大小不能超过2MB');\n }\n\n return isJPG || isPNG && isLt2M;\n },\n},\n\n\n在 handleSuccess 函数中，将上传成功后的图片路径保存到 imageUrl 变量中。在 beforeUpload 函数中，可以对上传的文件进行一些限制，比如只允许上传 jpg/png 格式的图片，大小不能超过 2MB。\n\n这样就可以在组件中使用 el-upload 组件的 API。