el-upload图片上传

### 关于 `el-upload` 组件用于图片上传的示例 #### 实现简单的图片上传功能 HTML 部分展示了如何配置 `el-upload` 来完成基础设置，包括指定上传的目标 URL 地址以及一些事件处理器来管理文件的选择和提交过程[^1]。 ```html <template> <div> <!-- 设置 action 属性为目标服务器地址 --> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div> </el-upload> </div> </template> ``` 为了增强用户体验并控制上传行为，在上述基础上增加了更多自定义选项，比如通过绑定特定的方法到不同的钩子函数上（如 `before-upload`, `on-success`, `on-error`），从而可以在不同阶段执行相应的逻辑操作[^2]。 ```html <template> <el-upload action="https://example.com/upload" :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-error="handleError" :file-list="fileList" list-type="picture-card" :auto-upload="true"> <i class="el-icon-plus"></i> </el-upload> </template> <script> export default { data() { return { fileList: [] }; }, methods: { handleBeforeUpload(file) { const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJPGorPNG) { this.$message.error('仅支持 JPG 或 PNG 格式的图片!'); } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('图片大小不能超过 2MB!'); } return isJPGorPNG && isLt2M; }, handleSuccess(response, file, fileList) { console.log(`成功上传 ${file.name}`); }, handleError(err, file, fileList) { console.error(`上传失败：${err.message}`); } } }; </script> ``` 此代码片段不仅实现了图片预览的功能，还加入了对文件类型的验证机制，并设置了最大尺寸限制以确保只接受符合条件的照片。此外，当每次有新的照片被成功发送至服务器时都会触发对应的回调方法来进行进一步处理[^3]。 对于更复杂的场景需求，则可以通过调整参数或扩展原有结构的方式来满足业务要求，例如实现递归多文件上传等功能特性[^4]。