RuoYi平台之多文件上传编辑

万般皆苦,唯有自渡

1.vue 页面代码（基于若依平台框架）

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">

      <el-form-item label="要闻类型" prop="newsType">
        <el-select v-model="queryParams.newsType" placeholder="请选择所属要闻类型" clearable :style="{width: '100%'} ">
          <el-option v-for="(item, index) in newsTypePtions" :key="index" :label="item.label"
                     :value="item.value" :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="发布状态" prop="newsReleaseStatus">
        <el-select v-model="queryParams.newsReleaseStatus" placeholder="请选择要闻发布状态" clearable
                   :style="{width: '100%'} ">
          <el-option v-for="(item, index) in newsReleaseStatusPtions" :key="index" :label="item.label"
                     :value="item.value" :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="要闻标题" prop="newsTitle">
        <el-input
          v-model="queryParams.newsTitle"
          placeholder="请输入要闻标题"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="要闻发布时间" prop="newsReleaseTime">
        <el-date-picker clearable size="small"
                        v-model="dateRange"
                        style="width: 240px"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        placeholder="选择要闻发布时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['cms:news:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['cms:news:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['cms:news:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['cms:news:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="newsList" :row-class-name=" rowClassName"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="编号" align="center" prop="sort"/>
      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
      <el-table-column label="类型" align="center" prop="newsType">
        <template slot-scope="scope">
          <span v-if="scope.row.newsType==='0'">行业要闻</span>
          <span v-else-if="scope.row.newsType==='1'">企业要问</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center" prop="newsTitle"/>
      <el-table-column label="文章来源" align="center" prop="newsSource"/>
      <el-table-column label="文章来源作者" align="center" prop="newsSourceAuthor"/>
      <el-table-column label="发布类型" align="center" prop="newsReleaseType">
        <template slot-scope="scope">
          <span v-if="scope.row.newsReleaseType==='0'">立即发布</span>
          <span v-else-if="scope.row.newsReleaseType==='1'">预约发布</span>
          <span v-else-if="scope.row.newsReleaseType==='2'">其他</span>
        </template>
      </el-table-column>
      <el-table-column label="发布状态" align="center" prop="newsReleaseStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.newsReleaseStatus==='0'">未发布</span>
          <span v-else-if="scope.row.newsReleaseStatus==='1'">预约中</span>
          <span v-else-if="scope.row.newsReleaseStatus==='2'">已发布</span>
          <span v-else-if="scope.row.newsReleaseStatus==='3'">取消预约</span>
          <span v-else-if="scope.row.newsReleaseStatus==='4'">已撤回</span>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" align="center" prop="newsReleaseTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.newsReleaseTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布预约时间" align="center" prop="newsAppointmentTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.newsAppointmentTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="浏览次数" align="center" prop="newsBrowseNum"/>
      <el-table-column label="点赞次数" align="center" prop="newsLoveNum"/>
      <el-table-column label="收藏次数" align="center" prop="newsCollectionNum"/>
      <el-table-column label="创建者" align="center" prop="newsCreateBy"/>
      <el-table-column label="更新者" align="center" prop="newsUpdateBy"/>
      <!--<el-table-column label="评价状态(0正常 1停用)" align="center" prop="newsEvaluateStatus"/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['cms:news:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['cms:news:remove']"
          >删除
          </el-button>

          <el-dropdown>
            <span class="el-dropdown-link">
              更多操作
            </span>

            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-s-promotion"
                  @click="handleReleaseUpdate(scope.row)"
                  v-hasPermi="['cms:news:release']"
                  v-if="scope.row.newsReleaseStatus!='2'"
                >立即发布
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-back"
                  @click="handleRevokeRelease(scope.row)"
                  v-hasPermi="['cms:news:revoke']"
                  v-if="scope.row.newsReleaseStatus=='2'"
                >撤销发布
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-s-release"
                  @click="handleCancelRelease(scope.row)"
                  v-hasPermi="['cms:news:cancel']"
                  v-if="(scope.row.newsReleaseStatus=='0' && scope.row.newsAppointmentTime!=null)
                        || (scope.row.newsReleaseStatus=='1')"
                >取消预约
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改要闻对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="标题" prop="newsTitle">
          <el-input v-model="form.newsTitle" placeholder="请输入要闻标题"/>
        </el-form-item>
        <el-form-item label="类型" prop="newsType">
          <el-select v-model="form.newsType" placeholder="请选择所属要闻类型" clearable :style="{width: '100%'} ">
            <el-option v-for="(item, index) in newsTypePtions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示排序" prop="orderNum">
          <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
        </el-form-item>
        <el-form-item label="是否预约发布" prop="newsReleaseType">
          <el-radio-group v-model="radio">
            <el-radio v-model="radio" label="0">是</el-radio>
            <el-radio v-model="radio" label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预约发布时间" prop="newsAppointmentTime" v-if="radio === '0'">
          <el-date-picker clearable size="small"
                          v-model="form.newsAppointmentTime"
                          type="datetime"
                          format="yyyy-MM-dd HH:mm"
                          value-format="yyyy-MM-dd HH:mm"
                          placeholder="选择要闻预约发布时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="内容">
          <editor v-model="form.newsContent" :min-height="200"/>
        </el-form-item>
        <el-form-item label="描述" prop="newsDescribe">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入要闻描述"
            v-model="form.newsDescribe">
          </el-input>
        </el-form-item>

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

        <el-form-item label="要闻附件" prop="newsAnnexUrl">
          <el-upload
            :action="imgUpload.url"
            :headers="imgUpload.headers"
            :on-success="handleAnnexSuccess"
            :file-list="fileAnnexShow"
            :on-remove="handleAnnexRemove"
            multiple
            :before-upload="beforeAnnexUpload"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="form.newsReleaseStatus!=2">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listNews, getNews, delNews, addNews, updateNews,
    releaseNews,
    revokeNews,
    cancelNews
  } from "@/api/cms/news";
  import {getToken} from "../../../utils/auth";

  export default {
    name: "News",
    data() {
      return {
        //图片上传判断是否有相同图片
        isCommonName: true,
        //修改时此属性用于接收数据库中图片存储list，图片才能正常显示
        fileListShow: [],
        //页面上存的暂时图片地址List
        fileListPut: [],
        //附件上传
        //修改时此属性用于接收数据库中图片存储list，图片才能正常显示
        fileAnnexShow: [],
        //页面上存的暂时图片地址List
        fileAnnexPut: [],
        dialogImageUrl: '',
        dialogVisible: false,
        imgUpload: {
          // 设置上传的请求头部
          headers: {
            Authorization: "Bearer " + getToken()
          },
          // 图片上传的方法地址:
          url: process.env.VUE_APP_BASE_API + "/cms/activity/file/multiPicturesUpload",
          url2: process.env.VUE_APP_BASE_API,
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 要闻表格数据
        newsList: [],
        // 弹出层标题
        title: "",
        //设置预约时间为否
        radio: '1',
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          newsType: null,
          newsTitle: null,
          newsContent: null,
          newsDescribe: null,
          newsSource: null,
          newsSourceAuthor: null,
          newsReleaseType: null,
          newsReleaseStatus: null,
          newsReleaseTime: null,
          newsAppointmentTime: null,
          newsBrowseNum: null,
          newsLoveNum: null,
          newsCollectionNum: null,
          newsImgUrl: null,
          newsAnnexUrl: null,
          newsCreateBy: null,
          newsUpdateBy: null,
          newsEvaluateStatus: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          newsType: [
            {required: true, message: "要闻类型不能为空", trigger: "blur"}
          ],
          newsTitle: [
            {required: true, message: "要闻标题不能为空", trigger: "change"}
          ]
          , newsAppointmentTime: [{
            required: true, message: "要闻发布预约时间不能为空", trigger: "change"
          }],
          orderNum: [
            {required: true, message: "要闻顺序不能为空", trigger: "blur"}
          ]
        },
        //发布要闻类型
        newsTypePtions: [{
          "label": "行业要闻",
          "value": "0"
        }, {
          "label": "企业要闻",
          "value": "1"
        }],
        //发布要闻状态
        newsReleaseStatusPtions: [{
          "label": "未发布",
          "value": "0"
        }, {
          "label": "预约中",
          "value": "1"
        }, {
          "label": "已发布",
          "value": "2"
        }, {
          "label": "取消预约",
          "value": "3"
        }, {
          "label": "已撤回发布",
          "value": "4"
        }],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询要闻列表 */
      getList() {
        this.loading = true;
        listNews(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.newsList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          newsId: null,
          newsType: null,
          newsTitle: null,
          newsContent: '',
          newsDescribe: '',
          newsSource: null,
          newsSourceAuthor: null,
          newsReleaseType: null,
          newsReleaseStatus: "0",
          newsReleaseTime: null,
          newsAppointmentTime: '',
          newsBrowseNum: null,
          newsLoveNum: null,
          newsCollectionNum: null,
          newsCreateBy: null,
          newsUpdateBy: null,
          newsEvaluateStatus: "0",
          createTime: null,
          orderNum: null,
          delFlag: null,
          staticUrl: null,
          newsImgUrl: null,
          newsAnnexUrl: null,
          updateTime: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.newsId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加要闻";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const newsId = row.newsId || this.ids
        getNews(newsId).then(response => {
          this.radio = response.data.newsAppointmentTime ? '0' : '1';
          this.form = response.data;
          if (this.form.newsImgUrl != '' && this.form.newsImgUrl != null) {
            this.fileListShow = JSON.parse(this.form.newsImgUrl);
            this.fileListPut = JSON.parse(this.form.newsImgUrl);
          }
          if (this.form.newsAnnexUrl != '' && this.form.newsAnnexUrl != null) {
            this.fileAnnexShow = JSON.parse(this.form.newsAnnexUrl);
            this.fileAnnexPut = JSON.parse(this.form.newsAnnexUrl);
          }
          this.open = true;
          this.title = "修改要闻";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.fileAnnexPut.length > 0) {
              this.form.newsAnnexUrl = JSON.stringify(this.fileAnnexPut);
            } else {
              this.form.newsAnnexUrl = '';
            }
            if (this.fileListPut.length > 0) {
              this.form.newsImgUrl = JSON.stringify(this.fileListPut);
            } else {
              this.form.newsImgUrl = '';
            }
            if (this.form.newsId != null) {
              updateNews(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addNews(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const newsIds = row.newsId || this.ids;
        this.$modal.confirm('是否确认删除要闻标题为"' + newsIds + '"的数据项？').then(function () {
          return delNews(newsIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('cms/news/export', {
          ...this.queryParams
        }, `news_${new Date().getTime()}.xlsx`)
      },
      /** 立即发布 */
      handleReleaseUpdate(row) {
        this.$modal.confirm('确认要"' + "立即发布" + '"吗？').then(function () {
          return releaseNews(row.newsId, row.newsReleaseType, row.newsReleaseStatus);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("立即发布成功");
        }).catch(function () {
        });
      },
      /** 撤销发布 */
      handleRevokeRelease(row) {
        this.$modal.confirm('确认要"' + "撤销发布" + '"吗？').then(function () {
          return revokeNews(row.newsId, row.newsReleaseStatus);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("撤销发布成功");
        }).catch(function () {
        });
      },
      /** 取消预约 */
      handleCancelRelease(row) {
        this.$modal.confirm('确认要"' + "取消预约" + '"吗？').then(function () {
          return cancelNews(row.newsId, row.newsReleaseStatus, row.newsAppointmentTime);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("取消预约成功");
        }).catch(function () {
        });
      },
      //序号排序
      rowClassName({row, rowIndex}) {
        row.sort = rowIndex + 1;
      },
      //图片上传前的相关判断
      beforePictureUpload(file) {
        //每次进来初始化 isCommonName 为true
        this.isCommonName = true;
        const isJpeg = file.type === 'image/jpeg';
        const isPng = file.type === 'image/png';
        const isJpg = file.type === 'image/jpg';
        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 (!isJpeg && !isPng && !isJpg) {
          this.$message.error('请上传图片格式的文件！');
        }
        if (!isLt2M) {
          this.$message.error('上传的图片不能超过2MB!');
        }
        return (isJpeg || isPng || 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.imgUpload.url2 + file.response.imgUrl;
        //这是每个成功上传图片，以对象的形式保存在一个数组中，进而以JSON格式保存在数据库中某个字段里
        let currentFile = {name: '', url: ''};
        currentFile.name = file.name;
        currentFile.url = imgObjectUrl;
        //往此数组中保存当前图片对象
        this.fileListPut.push(currentFile);
      },

      //活动附件
      handleAnnexRemove(file, fileList) {
        //根据传进来删除的file里活动附件，同时删除保存在fileListPut的相同活动附件
        if (this.fileAnnexPut.length > 0) {
          this.fileAnnexPut = this.fileAnnexPut.filter((item, index) => {
            return item.name != file.name;
          })
        }
      },
      //活动附件上传成功后的回调
      handleAnnexSuccess(res, file) {
        //设置活动附件访问路径
        const imgObjectUrl = this.imgUpload.url2 + file.response.imgUrl;
        //这是每个成功上传活动附件，以对象的形式保存在一个数组中，进而以JSON格式保存在数据库中某个字段里
        let currentFile = {name: '', url: ''};
        currentFile.name = file.name;
        currentFile.url = imgObjectUrl;
        //往此数组中保存当前活动附件对象
        debugger
        this.fileAnnexPut.push(currentFile);
      },
      //活动附件上传前的相关判断
      beforeAnnexUpload(file) {
        //每次进来初始化 isCommonName 为true
        this.isCommonName = true;
        //判断是否有相同的附件，如何有即提示并添加失败
        if (this.fileAnnexPut.length > 0) {
          this.fileAnnexPut.forEach((item, index) => {
            if (item.name == file.name) {
              this.$message.error('已存在相同的附件！');
              this.isCommonName = false;
            }
          })
        }
        return this.isCommonName;
      },
    }
  };
</script>

2.后端代码

• 多文件上传代码

/**
     * 多文件上传
     */
    @Log(title = "论坛多图片上传", businessType = BusinessType.UPDATE)
    @PostMapping("/file/multiPicturesUpload")
    public AjaxResult multiPicturesUpload(@RequestParam(value = "file") MultipartFile file) throws IOException {
        //RuoYiConfig.getForumPath() 获取自定义该模块的图片保存路径
        if (!file.isEmpty()) {
            //获取上传成功的文件保存路径，并返回给前台
            String filePath = FileUploadUtils.upload(DatagoConfig.getUploadPath(), file);
            if (!StringUtils.isEmpty(filePath)) {
                AjaxResult ajax = AjaxResult.success();
                ajax.put("imgUrl", filePath);
                return ajax;
            }
        }
        return AjaxResult.error("上传图片异常，请联系管理员");
    }

• 增加代码

 /**
     * 新增
     */
    @Log(title = "", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody DatagoActivity datagoActivity) {
        return toAjax(datagoActivityService.insertDatagoActivity(datagoActivity));
    }

• 编辑代码

    @Log(title = "", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody DatagoActivity datagoActivity) {
        datagoActivity.setActivityUpdateBy(getUsername())；
        return toAjax(datagoActivityService.updateDatagoActivity(datagoActivity));
    }

3. 效果图

4.寄语

坚持学习，越努力越幸运