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

背景

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

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

实现步骤

1. 创建本地组件

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

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

2. 组件核心代码

<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"
      <!--