基于若依框架和Vue2 + Element-UI 实现图片上传组件的重写与优化

背景

在使用若依分离版Element-UI 的图片上传组件时,需要根据业务需求进行定制化处理,比如:

需要传递额外的业务参数到后端
需要对上传路径进行修改
需要对上传组件进行样式定制

实现步骤

1. 创建本地组件

首先在业务模块下创建本地的图片上传组件:

src/views/xxx/components/ImageUpload/index.vue

2. 组件核心代码

<template><div class="component-upload-image"><el-uploadmultiple:action="uploadImgUrl":data="{bizType: bizType  // 传递业务参数}"list-type="picture-card":on-success="handleUploadSuccess":before-upload="handleBeforeUpload":headers="headers":file-list="fileList"<!-- 其他属性 -->><i class="el-icon-plus"></i></el-upload></div>
</template><script>
export default {name: 'ImageUpload',props: {value: {type: String,default: ''},// 业务类型参数bizType: {type: String,default: 'changeImages'}},data() {return {uploadImgUrl: process.env.VUE_APP_BASE_API + "/adminCommon/upload", // 自定义上传地址headers: {Authorization: "Bearer " + getToken()}}}
}
</script>

3. 注册使用

在父组件中注册并使用本地组件:

<script>
import ImageUpload from './components/ImageUpload/index.vue'export default {components: {LocalImageUpload: ImageUpload  // 注册为本地组件}
}
</script><template><LocalImageUpload v-model="form.imagesImg":bizType="'xxx'"   // 业务参数值/>
</template>

4. 禁用全局组件

在 main.js 中注释掉全局组件的注册（如果有其他地方使用则不需要注释）:

// 注释掉全局图片上传组件
// Vue.component('ImageUpload', ImageUpload)

5.后端接收

public AjaxResult uploadFile(MultipartFile file , @RequestParam("bizType") String bizType) throws Exception{}

核心优化点

1.参数传递

通过 props 定义业务参数
使用 el-upload 的 data 属性传递参数到后端

2.上传地址

自定义上传地址
支持环境变量配置

3.文件验证

支持文件类型验证
支持文件大小限制
支持上传数量限制

4.交互优化

上传前预检查
上传中loading提示
上传成功/失败提示
预览功能

使用示例

<!-- 在表单中使用 -->
<el-form-item label="图片" prop="imagesImg"><LocalImageUpload v-model="form.imagesImg":bizType="'xxx'"/>
</el-form-item><!-- 在表格中使用 -->
<el-table-column label="图片" align="center" prop="imagesImg"><template slot-scope="scope"><LocalImageUpload v-model="scope.row.imagesImg":bizType="'xxx'"/></template>
</el-table-column>