update 完成OSS模块页面功能

ruoyi-oss/src/main/java/com/ruoyi/oss/constant/CloudConstant.java

@@ -12,7 +12,4 @@ public class CloudConstant {
 	 */
 	public final static String CLOUD_STORAGE_CONFIG_KEY = "sys.oss.cloudStorageService";
 
-	public final static String DEFAULT_CONTENT_TYPE = "application/octet-stream";
-
-
 }

ruoyi-oss/src/main/java/com/ruoyi/oss/service/impl/MinioCloudStorageServiceImpl.java

@@ -1,7 +1,6 @@
 package com.ruoyi.oss.service.impl;
 
 import cn.hutool.core.util.StrUtil;
-import com.ruoyi.oss.constant.CloudConstant;
 import com.ruoyi.oss.entity.UploadResult;
 import com.ruoyi.oss.enumd.CloudServiceEnumd;
 import com.ruoyi.oss.enumd.PolicyType;
@@ -14,6 +13,7 @@ import io.minio.*;
 import org.springframework.beans.factory.InitializingBean;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.context.annotation.Lazy;
+import org.springframework.http.MediaType;
 import org.springframework.stereotype.Service;
 
 import java.io.ByteArrayInputStream;
@@ -70,7 +70,7 @@ public class MinioCloudStorageServiceImpl extends AbstractCloudStorageService im
 			minioClient.putObject(PutObjectArgs.builder()
 				.bucket(properties.getBucketName())
 				.object(path)
-				.contentType(StrUtil.blankToDefault(contentType, CloudConstant.DEFAULT_CONTENT_TYPE))
+				.contentType(StrUtil.blankToDefault(contentType, MediaType.APPLICATION_OCTET_STREAM_VALUE))
 				.stream(inputStream, inputStream.available(), -1)
 				.build());
 		} catch (Exception e) {

ruoyi-oss/src/main/java/com/ruoyi/system/controller/SysOssController.java

@@ -1,6 +1,8 @@
 package com.ruoyi.system.controller;
 
 
+import cn.hutool.core.convert.Convert;
+import cn.hutool.http.HttpUtil;
 import com.ruoyi.common.annotation.Log;
 import com.ruoyi.common.annotation.RepeatSubmit;
 import com.ruoyi.common.core.controller.BaseController;
@@ -18,12 +20,15 @@ import io.swagger.annotations.ApiImplicitParams;
 import io.swagger.annotations.ApiOperation;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.MediaType;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 
+import javax.servlet.http.HttpServletResponse;
 import javax.validation.constraints.NotEmpty;
+import java.io.IOException;
 import java.util.Arrays;
 import java.util.HashMap;
 import java.util.Map;
@@ -74,6 +79,20 @@ public class SysOssController extends BaseController {
 		return AjaxResult.success(map);
 	}
 
+	@ApiOperation("下载OSS云存储")
+	@PreAuthorize("@ss.hasPermi('system:oss:download')")
+	@GetMapping("/download/{ossId}")
+	public void download(@PathVariable Long ossId, HttpServletResponse response) throws IOException {
+		SysOss sysOss = iSysOssService.getById(ossId);
+		if (sysOss == null) {
+			throw new CustomException("文件数据不存在!");
+		}
+		response.reset();
+		response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE + "; charset=UTF-8");
+		long data = HttpUtil.download(sysOss.getUrl(), response.getOutputStream(), false);
+		response.setContentLength(Convert.toInt(data));
+	}
+
 	/**
 	 * 删除OSS云存储
 	 */

ruoyi-ui/src/api/system/oss.js

@@ -9,23 +9,6 @@ export function listOss(query) {
   })
 }
 
-// 上传OSS云存储
-export function addOss(data) {
-  return request({
-    url: '/system/oss/upload',
-    method: 'post',
-    data: data
-  })
-}
-
-// 下载OSS云存储
-export function downloadOss(ossId) {
-  return request({
-    url: '/system/oss/download/' + ossId,
-    method: 'get'
-  })
-}
-
 // 删除OSS云存储
 export function delOss(ossId) {
   return request({

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

@@ -54,7 +54,7 @@ export default {
   },
   data() {
     return {
-      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken()
       },

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

@@ -27,7 +27,7 @@
     <!-- 文件列表 -->
     <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
       <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
-        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
+        <el-link :href="`${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
@@ -70,7 +70,7 @@ export default {
   data() {
     return {
       baseUrl: process.env.VUE_APP_BASE_API,
-      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
       },

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

@@ -74,7 +74,7 @@ export default {
       dialogVisible: false,
       hideUpload: false,
       baseUrl: process.env.VUE_APP_BASE_API,
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
       },
@@ -90,11 +90,7 @@ export default {
           // 然后将数组转为对象数组
           this.fileList = list.map(item => {
             if (typeof item === "string") {
-              if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: this.baseUrl + item, url: this.baseUrl + item };
-              } else {
-                  item = { name: item, url: item };
-              }
+              item = { name: item, url: item };
             }
             return item;
           });
@@ -122,7 +118,7 @@ export default {
     },
     // 上传成功回调
     handleUploadSuccess(res) {
-      this.fileList.push({ name: res.data.fileName, url: res.data.fileName });
+      this.fileList.push({ name: res.data.fileName, url: res.data.url });
       this.$emit("input", this.listToString(this.fileList));
       this.loading.close();
     },

ruoyi-ui/src/utils/ossdownload.js

@@ -0,0 +1,33 @@
+import axios from 'axios'
+import { getToken } from '@/utils/auth'
+
+const mimeMap = {
+  oss: 'application/octet-stream'
+}
+
+const baseUrl = process.env.VUE_APP_BASE_API
+export function downLoadOss(ossId, filename) {
+  var url = baseUrl + '/system/oss/download/' + ossId
+    axios({
+    method: 'get',
+    url: url,
+    responseType: 'blob',
+    headers: { 'Authorization': 'Bearer ' + getToken() }
+  }).then(res => {
+    resolveBlob(res, mimeMap.oss, filename)
+  })
+}
+/**
+ * 解析blob响应内容并下载
+ * @param {*} res blob响应内容
+ * @param {String} mimeType MIME类型
+ */
+export function resolveBlob(res, mimeType, filename) {
+  const aLink = document.createElement('a')
+  var blob = new Blob([res.data], { type: mimeType })
+  aLink.href = URL.createObjectURL(blob)
+  aLink.setAttribute('download', filename) // 设置下载文件名称
+  document.body.appendChild(aLink)
+  aLink.click()
+  document.body.removeChild(aLink);
+}

ruoyi-ui/src/views/system/oss/index.vue

@@ -71,9 +71,19 @@
           plain
           icon="el-icon-plus"
           size="mini"
-          @click="handleAdd"
+          @click="handleFile"
           v-hasPermi="['system:oss:upload']"
-        >上传</el-button>
+        >上传文件</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleImage"
+          v-hasPermi="['system:oss:upload']"
+        >上传图片</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -94,8 +104,16 @@
       <el-table-column label="云存储主键" align="center" prop="ossId" v-if="false"/>
       <el-table-column label="文件名" align="center" prop="fileName" />
       <el-table-column label="原名" align="center" prop="originalName" />
-      <el-table-column label="文件后缀名" align="center" prop="fileSuffix" />
-      <el-table-column label="URL地址" align="center" prop="url" />
+      <el-table-column label="文件后缀" align="center" prop="fileSuffix" />
+      <el-table-column label="文件展示" align="center" prop="url" >
+        <template slot-scope="scope">
+          <el-image
+            v-if="scope.row.fileSuffix.indexOf('png','jpg','jpeg') > 0"
+            style="width: 100px; height: 100px;"
+            :src="scope.row.url"
+            :preview-src-list="[scope.row.url]"/>
+        </template>
+      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
@@ -135,7 +153,8 @@
     <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="文件名">
-          <imageUpload v-model="form.file"/>
+          <fileUpload v-model="form.file" v-if="type === 0"/>
+          <imageUpload v-model="form.file" v-if="type === 1"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -147,7 +166,8 @@
 </template>
 
 <script>
-import { listOss, delOss, addOss, downloadOss } from "@/api/system/oss";
+import { listOss, delOss } from "@/api/system/oss";
+import { downLoadOss } from "@/utils/ossdownload";
 
 export default {
   name: "Oss",
@@ -173,6 +193,8 @@ export default {
       ossList: [],
       // 弹出层标题
       title: "",
+      // 弹出层标题
+      type: 0,
       // 是否显示弹出层
       open: false,
       // 创建时间时间范围
@@ -225,17 +247,7 @@ export default {
     // 表单重置
     reset() {
       this.form = {
-        ossId: undefined,
         file: undefined,
-        fileName: undefined,
-        originalName: undefined,
-        fileSuffix: undefined,
-        url: undefined,
-        createTime: undefined,
-        createBy: undefined,
-        updateTime: undefined,
-        updateBy: undefined,
-        service: undefined
       };
       this.resetForm("form");
     },
@@ -256,26 +268,28 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
-    handleAdd() {
+    /** 文件按钮操作 */
+    handleFile() {
       this.reset();
       this.open = true;
-      this.title = "上传OSS云存储";
+      this.title = "上传文件";
+      this.type = 0;
+    },
+    /** 图片按钮操作 */
+    handleImage() {
+      this.reset();
+      this.open = true;
+      this.title = "上传图片";
+      this.type = 1;
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          addOss(this.form).then(response => {
-            this.msgSuccess("上传成功");
-            this.open = false;
-            this.getList();
-          }).finally(() => {
-            this.buttonLoading = false;
-          });
-        }
-      });
+      this.open = false;
+      this.getList();
+    },
+    /** 下载按钮操作 */
+    handleDownload(row) {
+      downLoadOss(row.ossId, row.originalName)
     },
     /** 删除按钮操作 */
     handleDelete(row) {

sql/oss.sql

@@ -22,4 +22,5 @@ insert into sys_menu values('118',  '文件管理', '1',   '10', 'oss',     'sys
 
 insert into sys_menu values('1600', '文件查询', '118', '1', '#', '', 1, 0, 'F', '0', '0', 'system:oss:query',        '#', 'admin', sysdate(), '', null, '');
 insert into sys_menu values('1601', '文件上传', '118', '2', '#', '', 1, 0, 'F', '0', '0', 'system:oss:upload',       '#', 'admin', sysdate(), '', null, '');
-insert into sys_menu values('1602', '文件删除', '118', '3', '#', '', 1, 0, 'F', '0', '0', 'system:oss:remove',       '#', 'admin', sysdate(), '', null, '');
+insert into sys_menu values('1602', '文件下载', '118', '3', '#', '', 1, 0, 'F', '0', '0', 'system:oss:download',     '#', 'admin', sysdate(), '', null, '');
+insert into sys_menu values('1603', '文件删除', '118', '4', '#', '', 1, 0, 'F', '0', '0', 'system:oss:remove',       '#', 'admin', sysdate(), '', null, '');