新闻信息配置封面上传

ruoyi-ui/.env.development

@@ -5,7 +5,9 @@ VUE_APP_TITLE = 官网后台管理系统
 ENV = 'development'
 
 # 若依管理系统/开发环境
-VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = '/prod-api'
+VUE_APP_API_TARGET_URL = 'http://47.121.27.78:8080/'
+VUE_APP_IMAGE_PREVIEW_API = '/imagePreview/upload'
 
 # 应用访问路径 例如使用前缀 /admin/
 VUE_APP_CONTEXT_PATH = '/'

ruoyi-ui/src/components/Editor/index.vue

@@ -60,7 +60,7 @@ export default {
   },
   data() {
     return {
-      uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
+      uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/addPartsUpload", // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken()
       },
@@ -176,7 +176,7 @@ export default {
         // 获取光标所在位置
         let length = quill.getSelection().index;
         // 插入图片  res.url为服务器返回的图片地址
-        quill.insertEmbed(length, "image", res.data.url);
+        quill.insertEmbed(length, "image", this.$imagePreviewApi + '/' + res.data.url.split('/').pop());
         // 调整光标到最后
         quill.setSelection(length + 1);
       } else {

ruoyi-ui/src/components/FragmentUpload/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <el-upload>
+      <i class="el-icon-plus"></i>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

ruoyi-ui/src/components/ImageUploadLochost/index.vue

@@ -1,21 +1,25 @@
 <template>
   <div class="component-upload-image">
     <el-upload
-      multiple
       :action="uploadImgUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      ref="imageUpload"
-      :on-remove="handleDelete"
-      :show-file-list="true"
       :headers="headers"
+      list-type="picture-card"
+
+      :multiple="multipleUpload"
+      :limit="limit"
+      :on-exceed="handleExceed"
+
+      :before-upload="handleBeforeUpload"
+      :on-success="handleUploadSuccess"
+      :on-error="handleUploadError"
+
+      :show-file-list="true"
       :file-list="fileList"
+      :on-remove="handleDelete"
       :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
+      
+      ref="imageUpload"
+      :class="{ hide: fileList.length >= this.limit }"
     >
       <i class="el-icon-plus"></i>
     </el-upload>
@@ -23,9 +27,10 @@
     <!-- 上传提示 -->
     <div class="el-upload__tip" slot="tip" v-if="showTip">
       请上传
+      <template v-if="limit"> 至多 <b style="color: #f56c6c">{{ limit }}</b> 张 </template>
       <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
       <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-      的文件
+      的图片
     </div>
 
     <el-dialog
@@ -44,172 +49,100 @@
 
 <script>
 import { getToken } from "@/utils/auth";
-import { listByIds, delOss } from "@/api/system/oss";
 
 export default {
   props: {
-    value: [String, Object, Array],
+    // 图片地址 url1,url2,...
-    // 图片数量限制
+    value: String,
-    limit: {
+    // 是否允许同时上传多个文件
-      type: Number,
+    multipleUpload: { type: Boolean, default: false },
-      default: 5,
-    },
-    // 大小限制(MB)
-    fileSize: {
-       type: Number,
-      default: 5,
-    },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["png", "jpg", "jpeg"],
-    },
     // 是否显示提示
-    isShowTip: {
+    isShowTip: { type: Boolean, default: true },
-      type: Boolean,
+    // 图片数量限制
-      default: true
+    limit: { type: Number, default: 5 },
-    }
+    // 大小限制(MB)
+    fileSize: { type: Number, default: 5 },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: { type: Array, default: () => ["png", "jpg", "jpeg"] },
   },
   data() {
     return {
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/addPartsUpload", // 上传的图片服务器地址
+      headers: { Authorization: "Bearer " + getToken() },
       number: 0,
       uploadList: [],
+
       dialogImageUrl: "",
       dialogVisible: false,
-      hideUpload: false,
-      baseUrl: process.env.VUE_APP_BASE_API,
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/addPartsUpload", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: []
     };
   },
-  watch: {
-    value: {
-      async handler(val) {
-        if (val) {
-          // 首先将值转为数组
-          let list;
-          if (Array.isArray(val)) {
-            list = val;
-          } else {
-            await listByIds(val).then(res => {
-              list = res.data;
-            })
-          }
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            // 此处name使用ossId 防止删除出现重名
-            item = { name: item.ossId, url: item.url, ossId: item.ossId };
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
   computed: {
+    fileList () {
+      return (this.value ? this.value.split(',') : []).map(url => {
+        return {
+          url: process.env.VUE_APP_IMAGE_PREVIEW_API + '/' + url.split('/').pop(),
+          name: url,
+        };
+      });
+    },
     // 是否显示提示
     showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
+      return this.isShowTip && (this.limit || this.fileType || this.fileSize);
     },
   },
   methods: {
-    // 上传前loading加载
-    handleBeforeUpload(file) {
-      let isImg = false;
-      if (this.fileType.length) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-        }
-        isImg = this.fileType.some((type) => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
-      } else {
-        isImg = file.type.indexOf("image") > -1;
-      }
-
-      if (!isImg) {
-        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
-        return false;
-      }
-      if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
-        if (!isLt) {
-          this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
-          return false;
-        }
-      }
-      this.$modal.loading("正在上传图片，请稍候...");
-      this.number++;
-    },
     // 文件个数超出
     handleExceed() {
       this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
     },
-    // 上传成功回调
+
-    handleUploadSuccess(res, file) {
+    // 上传前的校验
-      if (res.code === 200) {
+    handleBeforeUpload(file) {
-        this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
+      // 校验文件格式
-        this.uploadedSuccessfully();
+      let isImg = file.type.includes("image");
-      } else {
+      if (this.fileType.length) {
-        this.number--;
+        let fileExtension = file.name.includes('.') ? file.name.split('.').pop() : '';
-        this.$modal.closeLoading();
+        isImg = this.fileType.some((type) => fileExtension.includes(type) || file.type.includes(type));
-        this.$modal.msgError(res.msg);
-        this.$refs.imageUpload.handleRemove(file);
-        this.uploadedSuccessfully();
       }
+      if (!isImg) {
+        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
+        return false;
+      }
+      // 校验文件大小
+      if (this.fileSize && file.size / 1024 / 1024 > this.fileSize) {
+        this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+        return false;
+      }
+      this.$modal.loading("正在上传图片，请稍候...");
     },
-    // 删除图片
+    // 上传成功回调
-    handleDelete(file) {
+    handleUploadSuccess(res) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
+      if (res.code === 200) {
-      if(findex > -1) {
+        this.$emit('input', (this.value || '') + (this.value ? ',' : '') + res.data.url);
-        let ossId = this.fileList[findex].ossId;
+      } else {
-        delOss(ossId);
+        this.$modal.msgError(res.msg);
-        this.fileList.splice(findex, 1);
-        this.$emit("input", this.listToString(this.fileList));
       }
+      this.$modal.closeLoading();
     },
     // 上传失败
     handleUploadError(res) {
       this.$modal.msgError("上传图片失败，请重试");
       this.$modal.closeLoading();
     },
-    // 上传结束处理
+
-    uploadedSuccessfully() {
+    // 删除图片
-      if (this.number > 0 && this.uploadList.length === this.number) {
+    handleDelete(file) {
-        this.fileList = this.fileList.concat(this.uploadList);
+      const current = this.value.split(',');
-        this.uploadList = [];
+      const targetIndex = current.findIndex(f => f === file.name);
-        this.number = 0;
+      current.splice(targetIndex, 1);
-        this.$emit("input", this.listToString(this.fileList));
+      this.$emit('input', current.join(','));
-        this.$modal.closeLoading();
-      }
     },
     // 预览
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
     },
-    // 对象转成指定字符串分隔
+  },
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        if (list[i].ossId) {
-          strs += list[i].ossId + separator;
-        }
-      }
-      return strs != "" ? strs.substr(0, strs.length - 1) : "";
-    }
-  }
 };
 </script>
 <style scoped lang="scss">

ruoyi-ui/src/main.js

@@ -31,6 +31,8 @@ import FileUpload from "@/components/FileUpload"
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
 
+// 分片上传
+import FragmentUpload from "@/components/FragmentUpload"
 // 本地图片上传组件
 import ImageUploadLoca from "@/components/ImageUploadLochost"
 // 图片预览组件
@@ -42,6 +44,9 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+// 全局属性挂载
+Vue.prototype.$imagePreviewApi = process.env.VUE_APP_IMAGE_PREVIEW_API
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -63,6 +68,7 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUploadLochost', ImageUploadLoca)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('FragmentUpload', FragmentUpload)
 
 Vue.use(directive)
 Vue.use(plugins)

ruoyi-ui/src/views/official/slideshow/index.vue

@@ -90,7 +90,11 @@
     <el-table v-loading="loading" :data="slideshowList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键id" align="center" prop="id" v-if="false"/>
-      <el-table-column label="封面" align="center" prop="cover" />
+      <el-table-column label="封面" align="center" prop="cover">
+        <template slot-scope="{ row }">
+          <img :src="$imagePreviewApi + '/' + row.cover.split('/').pop()" alt="" style="width:50px;height:50px;object-fit:cover;">
+        </template>
+      </el-table-column>
       <el-table-column label="标题名称" align="center" prop="captionName" />
       <el-table-column label="发布时间" align="center" prop="releaseTime" width="180">
         <template slot-scope="scope">
@@ -98,9 +102,13 @@
         </template>
       </el-table-column>
       <el-table-column label="集团名称" align="center" prop="groupName" />
-      <el-table-column label="新闻内容" align="center" prop="newsContent" />
+      <el-table-column label="新闻内容" align="center" prop="newsContent">
+        <template slot-scope="{ row }">
+          <div class="news-content-show" v-html="row.newsContent"></div>
+        </template>
+      </el-table-column>
       <el-table-column label="摘要" align="center" prop="abstracts" />
-      <el-table-column label="是否置顶  0：否  1：是" align="center" prop="isTop" />
+      <el-table-column label="是否置顶" align="center" prop="isTop" :formatter="(row, column, cellValue, index) => ['否', '是'][cellValue || '0']" />
       <el-table-column label="创建者id" align="center" prop="createUserId" />
       <el-table-column label="更新者id" align="center" prop="updateUserId" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -131,16 +139,14 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改新闻信息
+    <!-- 添加或修改新闻信息对话框 -->
-对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="封面" prop="cover">
-          <el-input v-model="form.cover" placeholder="请输入封面" />
-        </el-form-item>
         <el-form-item label="标题名称" prop="captionName">
           <el-input v-model="form.captionName" placeholder="请输入标题名称" />
         </el-form-item>
+        <el-row>
+          <el-col :span="12">
             <el-form-item label="发布时间" prop="releaseTime">
               <el-date-picker clearable
                 v-model="form.releaseTime"
@@ -149,17 +155,27 @@
                 placeholder="请选择发布时间">
               </el-date-picker>
             </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否置顶" prop="isTop">
+              <el-radio-group v-model="form.isTop">
+                <el-radio label="0">否</el-radio>
+                <el-radio label="1">是</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item label="集团名称" prop="groupName">
           <el-input v-model="form.groupName" placeholder="请输入集团名称" />
         </el-form-item>
-        <el-form-item label="新闻内容">
-          <editor v-model="form.newsContent" :min-height="192"/>
-        </el-form-item>
         <el-form-item label="摘要" prop="abstracts">
           <el-input v-model="form.abstracts" placeholder="请输入摘要" />
         </el-form-item>
-        <el-form-item label="是否置顶  0：否  1：是" prop="isTop">
+        <el-form-item label="封面" prop="cover">
-          <el-input v-model="form.isTop" placeholder="请输入是否置顶  0：否  1：是" />
+          <ImageUploadLochost v-model="form.cover" :limit="1" :fileSize="10" />
+        </el-form-item>
+        <el-form-item label="新闻内容" prop="newsContent">
+          <editor v-model="form.newsContent" :min-height="192"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -263,13 +279,13 @@ export default {
     reset() {
       this.form = {
         id: undefined,
-        cover: undefined,
+        cover: '',
         captionName: undefined,
         releaseTime: undefined,
         groupName: undefined,
         newsContent: undefined,
         abstracts: undefined,
-        isTop: undefined,
+        isTop: '0',
         createBy: undefined,
         createUserId: undefined,
         createTime: undefined,
@@ -362,3 +378,16 @@ export default {
   }
 };
 </script>
+
+<style scoped lang="scss">
+.news-content-show {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+::v-deep .news-content-show p {
+  margin: 0;
+}
+</style>

ruoyi-ui/vue.config.js

@@ -35,12 +35,19 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8081`,
+        target: process.env.VUE_APP_API_TARGET_URL,
+        changeOrigin: true,
+        // pathRewrite: {
+        //   ['^' + process.env.VUE_APP_BASE_API]: ''
+        // }
+      },
+      '/imagePreview': {
+        target: 'http://47.121.27.78:8008',
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
+          '^/imagePreview': '',
-        }
+        },
-      }
+      },
     },
     disableHostCheck: true
   },