update 完成OSS模块页面功能

疯狂的狮子li

2021-07-20 ed197ce7acddf4183b8459b57f0c39b0284b98b5

update 完成OSS模块页面功能

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

@@ -12,7 +12,4 @@
     */
    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 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 @@
            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.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 @@
        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 @@
  })
}

// ä¸Šä¼ 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 @@
  },
  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 @@
  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 @@
      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 @@
          // ç„¶åŽå°†æ•°ç»„转为对象数组
          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 @@
    },
    // ä¸Šä¼ æˆåŠŸå›žè°ƒ
    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 @@
      ossList: [],
      // å¼¹å‡ºå±‚标题
      title: "",
      // å¼¹å‡ºå±‚标题
      type: 0,
      // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
      open: false,
      // åˆ›å»ºæ—¶é—´æ—¶é—´èŒƒå›´
@@ -225,17 +247,7 @@
    // è¡¨å•é‡ç½®
    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 @@
      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('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, '');