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

背景

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

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

实现步骤

1. 创建本地组件

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

java 复制代码

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

2. 组件核心代码

java 复制代码

<template>
  <div class="component-upload-image">
    <el-upload
      multiple
      :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. 注册使用

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

java 复制代码

<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 中注释掉全局组件的注册（如果有其他地方使用则不需要注释）:

java 复制代码

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

5.后端接收

java 复制代码

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

核心优化点

1.参数传递

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

2.上传地址

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

3.文件验证

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

4.交互优化

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

使用示例

java 复制代码

<!-- 在表单中使用 -->
<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>

优势

更灵活的参数传递
更好的代码组织
更容易维护和扩展
避免全局污染
支持业务定制化
这样的组件重写既保留了 Element-UI 上传组件的基础功能,又增加了业务所需的定制化能力。