Merge branch '测试OBS' of sckj/mz-cloud into master

ruoyi-ui/package.json

@@ -43,9 +43,9 @@
         "core-js": "3.19.1",
         "dayjs": "^1.11.1",
         "echarts": "4.9.0",
-        "moment": "^2.29.3",
         "echarts-liquidfill": "^2.0.6",
         "element-ui": "2.15.8",
+        "esdk-obs-browserjs": "^3.22.3",
         "file-saver": "2.0.5",
         "fuse.js": "6.4.3",
         "highlight.js": "9.18.5",
@@ -54,6 +54,7 @@
         "js-cookie": "3.0.1",
         "jsencrypt": "3.0.0-rc.1",
         "jspdf": "^2.5.1",
+        "moment": "^2.29.3",
         "nprogress": "0.2.0",
         "quill": "1.3.7",
         "screenfull": "5.0.2",

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

@@ -0,0 +1,255 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      multiple
+      action
+      :on-change="fileChange"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :limit="limit"
+      :on-exceed="handleExceed"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+      ref="upload"
+    >
+      <!-- 上传按钮 -->
+      <el-button size="mini" type="primary">选取文件</el-button>
+      <!-- 上传提示 -->
+      <div class="el-upload__tip" slot="tip" v-if="showTip">
+        请上传
+        <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-upload>
+
+    <!-- 文件列表 -->
+    <transition-group
+      class="upload-file-list el-upload-list el-upload-list--text"
+      name="el-fade-in-linear"
+      tag="ul"
+    >
+      <li
+        :key="file.url"
+        class="el-upload-list__item ele-upload-list__item-content"
+        v-for="(file, index) in fileList"
+      >
+        <el-link :href="file.url" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ file.name }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleDelete(index)" type="danger"
+          >删除</el-link
+          >
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import { uuid } from "vue-uuid";
+import { getToken } from "@/utils/auth";
+import ObsClient from "esdk-obs-browserjs/src/obs";
+export default {
+  name: "FileUpload",
+  props: {
+// 值
+    value: [String, Object, Array],
+// 数量限制
+    limit: {
+      type: Number,
+      default: 5,
+    },
+// 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+// 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+    },
+// 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: [],
+      file: undefined,
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          let temp = 1;
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(",");
+          // 然后将数组转为对象数组
+          this.fileList = list.map((item) => {
+            if (typeof item === "string") {
+              item = { name: item, url: item };
+            }
+            item.uid = item.uid || new Date().getTime() + temp++;
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+// 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  methods: {
+    uploadObs() {},
+    fileChange(file, fileList) {
+      this.file = file;
+    },
+// 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      console.log(file);
+      let that = this;
+      // 校检文件类型
+      if (this.fileType) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        }
+        const isTypeOk = this.fileType.some((type) => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+        if (!isTypeOk) {
+          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("正在上传文件，请稍候...");
+      let uuids = uuid.v1() + Date.now();
+      // 创建ObsClient实例
+      var obsClient = new ObsClient({
+        access_key_id: "PFUCYWN1PHHNIZAS9E9L", // 你的ak
+        secret_access_key: "4g3bggtamms8p8dcC1dnha1d9dUmyXgy8gqMH8dU", // 你的sk
+        server: "https://14.125.0.146", // 你的endPoint  记得加入https://
+      });
+      obsClient.putObject(
+        {
+          Bucket: "obsylfwxt", // 桶名
+          Key: uuids, // 文件名    此处用的是uuid+ 时间戳
+
+          SourceFile: file, //流文件
+        },
+        function (err, result) {
+          if (err) {
+            console.error("Error-->" + err);
+            that.handleUploadError();
+          } else {
+            console.log("Status-->" + result.CommonMsg.Status);
+            console.log(12312312);
+            that.uploadList.push({
+              name: `${uuids}`, //名字自取 这里我用了uuid + 时间戳
+              url: `https://obsylfwxt.14.125.0.146/${uuids}`,  // 因为访问路径OBS没有给你返回需要自行拼接   拼接格式： https:// +  桶名 + endPoint  +  /  + 上传的文件路径
+            });
+
+            that.fileList = that.fileList.concat(that.uploadList);
+            that.uploadList = [];
+            that.number = 0;
+            that.$emit("input", that.listToString(that.fileList));
+            that.$modal.closeLoading();
+            console.log(that.fileList);
+          }
+        }
+      );
+
+      this.number++;
+
+      return true;
+    },
+// 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+// 上传失败
+    handleUploadError(err) {
+      console.log(err);
+      this.$modal.msgError("上传图片失败，请重试");
+      this.$modal.closeLoading();
+    },
+
+// 删除文件
+    handleDelete(index) {
+      this.fileList.splice(index, 1);
+      this.$emit("input", this.listToString(this.fileList));
+    },
+// 获取文件名称
+    getFileName(name) {
+      return name;
+    },
+// 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url + separator;
+      }
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

ruoyi-ui/src/main.js

@@ -73,6 +73,10 @@ import Jg from '@/components/Details/Configuration/jg'
 import SelectionJg from '@/components/SelectionJg/index'
 // 地区树形组件
 import deptTree from '@/components/deptTree'
+
+// obs上传
+import OBSUpload from '@/components/OBSUpload'
+
 //图表
 import echarts from 'echarts'
 //时间
@@ -183,6 +187,8 @@ Vue.component('Echarts-box5', EchartsBox5)
 Vue.component('Echarts-box6', EchartsBox6)
 Vue.component('Echarts-mdtj', EchartsBoxMdtj)
 
+Vue.component('OBSUpload', OBSUpload)
+
 Vue.component('Echarts-year', EchartsYear)
 
 Vue.component('ylbttj-Echarts', ylbttjEcharts)

ruoyi-ui/src/views/organization/yggl/ygJbxx/index.vue

@@ -333,8 +333,10 @@
 			    </div>
 			    <div class="formFlex">
 				    <el-form-item label="身份证附件" prop="sfzhmUrl" class="formWidth2">
-					    <file-upload v-model="form.sfzhmUrl" :isShowTip="false" :isSfz="true" :limit="2" :fileSize="8"
-					                 :fileType="['jpg', 'jpeg', 'png']"></file-upload>
+<!--					    <file-upload v-model="form.sfzhmUrl" :isShowTip="false" :isSfz="true" :limit="2" :fileSize="8"-->
+<!--					                 :fileType="['jpg', 'jpeg', 'png']"></file-upload>-->
+              <OBSUpload v-model="form.sfzhmUrl" :file-type="['jpg', 'jpeg', 'png']" :fileSize="8">
+              </OBSUpload>
 				    </el-form-item>
 				    <el-form-item label="学历附件" prop="whcdUrl" class="formWidth2">
 					    <file-upload v-model="form.whcdUrl" :limit="5" :fileSize="8" :fileType="['jpg', 'jpeg', 'png']"></file-upload>