若依RuoYi前端分离版Vue中使用el-upload组件实现多图片上传功能（增加和修改）

一、前言：作为不是第一次做图片上传功能的小伙伴们估计都有这样的体会，实现图片上传功能不难，稍微需要花点时间是增加功能里成功添加的图片在修改功能里能正常显示，以及不刷新项目的前提下，相互切换增加和修改功能时，图片缓存问题的正常处理，以下详细介绍若依RuoYi-Vue前端分离版使用Element里的el-upload组件实现多图片上传功能：

二、前端相关代码：

A.标签代码(多图片上传组件)：

<!--:action里面放图片上传调取的后台方法 :headers设置上传的请求头部,使请求携带自定义token，获取访问权限 -->
<!--:on-success图片上传成功后的回调方法，用于拿到图片存储路径等信息-->
<!--:before-upload图片上传前的逻辑判断，例如判断图片大小，格式等-->
<!--:on-preview图片预览方法 :on-remove图片删除方法   list-type代表文件列表的类型 -->
<!--file-list存放成功上传图片列表，这里此属性用于修改功能时页面已有图片的显示-->
<el-form-item prop="pictureUrl">
  <el-upload
	:action="imgUpload.url"
	:headers="imgUpload.headers"
	:on-success="handlePictureSuccess"
	:before-upload="beforePictureUpload"
	list-type="picture-card"
	:file-list="fileListShow"
	:on-preview="handlePictureCardPreview"
	:on-remove="handleRemove">
	<i class="el-icon-plus"></i>
  </el-upload>
  <!--图片预览的dialog-->
  <el-dialog :visible.sync="dialogVisible">
	<img width="100%" :src="dialogImageUrl">
  </el-dialog>
</el-form-item>

B.属性值方法的定义：

export default {
  name: "Forum",
  data() {
    return {
      //图片上传判断是否有相同图片
      isCommonName: true,
      //修改时此属性用于接收数据库中图片存储list，图片才能正常显示
      fileListShow: [],
      //页面上存的暂时图片地址List
      fileListPut: [],
      dialogImageUrl: '',
      dialogVisible: false,
      imgUpload: {
          // 设置上传的请求头部
          headers: {
            Authorization: "Bear