若依RuoYi前端分离版Vue中使用el-upload组件实现多图片上传功能（增加和修改）_若依上传多张图片存在一个字段里

<!--: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: "Bearer " + getToken()
          },
          // 图片上传的方法地址:
          url: process.env.VUE_APP_BASE_API + "/forum/forum/multiPicturesUpload",
          url2: process.env.VUE_APP_BASE_API,
      }
    };
},
methods: {
    //图片上传前的相关判断
    beforePictureUpload(file){
      //每次进来初始化 isCommonName 为true
      this.isCommonName = true;
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      //判断是否有相同的图片，如何有即提示并添加失败
      if(this.fileListPut.length > 0){
        this.fileListPut.forEach((item,index)=>{
          if(item.name == file.name){
             this.$message.error('已存在相同的图片！');
             this.isCommonName = false;
          }
        })
      }
      if (!isJPG) {
        this.$message.error('请上传图片格式的文件！');
      }
      if (!isLt2M) {
        this.$message.error('上传的图片不能超过2MB!');
      }
      return isJPG && isLt2M && this.isCommonName;
    },
    //图片上传删除
    handleRemove(file, fileList) {
	  //根据传进来删除的file里图片，同时删除保存在fileListPut的相同图片
      if(this.fileListPut.length > 0){
          this.fileListPut = this.fileListPut.filter((item, index)=>{
          return item.name != file.name;
        })
      }
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file){
	  //设置图片访问路径
      const imgObjectUrl = this.videoUpload.url2 + file.response.imgUrl;
	  //这是每个成功上传图片，以对象的形式保存在一个数组中，进而以JSON格式保存在数据库中某个字段里
      let currentFile = {name: '',url: ''};
      currentFile.name = file.name;
      currentFile.url = imgObjectUrl;
	  //往此数组中保存当前图片对象
      this.fileListPut.push(currentFile);
    }
}

C.成功上传的图片访问路径以JSON格式保存在对应表的某个字符串类型的字段中，增加和修改方法中注意点如下：

1.增加提交事件中该字段JSON格式：this.form.pictureUrl = JSON.stringify(this.fileListPut);

2.修改事件中进行格式转化赋值：if(this.form.pictureUrl != ‘’){
                                                        this.fileListShow = JSON.parse(this.form.pictureUrl);
                                                        this.fileListPut = JSON.parse(this.form.pictureUrl);
                                                      }

D.效果图如下：

提示：表中保存的数据详情和格式(JSON格式数组)如下：

[{“name”:“蜡笔小新图1.jpg”,“url”:“/dev-api/profile/forum/2020/07/13/603569f501a64b7513af2097c3b44e93.jpg”},{“name”:“蜡笔小新图2.jpg”,“url”:“/dev-api/profile/forum/2020/07/13/8b9d14cec2b452246481c18cba21d029.jpg”},{“name”:“蜡笔小新图3.jpg”,“url”:“/dev-api/profile/forum/2020/07/13/e5ea7dc52a48281aa3b42ddf6372c68b.jpg”},{“name”:“蜡笔小新图4.jpg”,“url”:“/dev-api/profile/forum/2020/07/13/eb2b269756f901fdb78aeccc623e1c88.jpg”}]

三、后端上传图片方法代码：

/**