Merge branch 'master' of https://gitee.com/zhijiantianya/ruoyi-vue-pro into feature/1.8.0-uniapp

Conflicts: yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/controller/admin/file/FileController.java yudao-module-member/yudao-module-member-biz/src/main/java/cn/iocoder/yudao/module/member/controller/admin/user/UserController.java yudao-ui-admin/src/components/ImageUpload/index.vue
2025-07-14 11:05:06 +08:00 · 2022-05-29 11:05:33 +08:00
parent 9dad9e555f add9317d89
commit bb26bc4012
276 changed files with 13777 additions and 5274 deletions
--- a/yudao-ui-admin/src/components/Editor/index.vue
+++ b/yudao-ui-admin/src/components/Editor/index.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <el-upload
-      :action="uploadUrl"
+      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
@ -10,7 +10,7 @@
      :headers="headers"
      style="display: none"
      ref="upload"
-      v-if="this.type == 'url'"
+      v-if="this.type === 'url'"
    >
    </el-upload>
    <div class="editor" ref="editor" :style="styles"></div>
@ -22,7 +22,7 @@ import Quill from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
-import { getToken } from "@/utils/auth";
+import { getAccessToken } from "@/utils/auth";

 export default {
  name: "Editor",
@ -60,10 +60,8 @@ export default {
  },
  data() {
    return {
-      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken()
-      },
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
+      headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
      Quill: null,
      currentValue: "",
      options: {
@ -126,7 +124,7 @@ export default {
      const editor = this.$refs.editor;
      this.Quill = new Quill(editor, this.options);
      // 如果设置了上传地址则自定义图片上传事件
-      if (this.type == 'url') {
+      if (this.type === 'url') {
        let toolbar = this.Quill.getModule("toolbar");
        toolbar.addHandler("image", (value) => {
          this.uploadType = "image";
@ -172,11 +170,13 @@ export default {
      // 获取富文本组件实例
      let quill = this.Quill;
      // 如果上传成功
-      if (res.code == 200) {
+      // edit by 芋道源码
+      if (res.code === 200 || res.code === 0) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
-        quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+        // edit by 芋道源码
+        quill.insertEmbed(length, "image", res.data);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
--- a/yudao-ui-admin/src/components/FileUpload/index.vue
+++ b/yudao-ui-admin/src/components/FileUpload/index.vue
@ -28,7 +28,7 @@
    <!-- 文件列表 -->
    <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="`${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">
@ -40,7 +40,7 @@
 </template>

 <script>
-import { getToken } from "@/utils/auth";
+import { getAccessToken } from "@/utils/auth";

 export default {
  name: "FileUpload",
@ -72,11 +72,8 @@ export default {
    return {
      number: 0,
      uploadList: [],
-      baseUrl: process.env.VUE_APP_BASE_API,
-      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
+      headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
      fileList: [],
    };
  },
@ -121,8 +118,7 @@ export default {
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
+          return !!(fileExtension && fileExtension.indexOf(type) > -1);
        });
        if (!isTypeOk) {
          this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
@ -152,7 +148,8 @@ export default {
    },
    // 上传成功回调
    handleUploadSuccess(res) {
-      this.uploadList.push({ name: res.fileName, url: res.fileName });
+      // edit by 芋道源码
+      this.uploadList.push({ name: res.data, url: res.data });
      if (this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
@ -181,7 +178,7 @@ export default {
      for (let i in list) {
        strs += list[i].url + separator;
      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+      return strs !== '' ? strs.substr(0, strs.length - 1) : '';
    }
  }
 };
--- a/yudao-ui-admin/src/components/ImageUpload/index.vue
+++ b/yudao-ui-admin/src/components/ImageUpload/index.vue
@ -1,21 +1,21 @@
 <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"
-      name="file"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :headers="headers"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
+        multiple
+        :action="uploadFileUrl"
+        list-type="picture-card"
+        :on-success="handleUploadSuccess"
+        :before-upload="handleBeforeUpload"
+        :limit="limit"
+        :on-error="handleUploadError"
+        :on-exceed="handleExceed"
+        name="file"
+        :on-remove="handleRemove"
+        :show-file-list="true"
+        :headers="headers"
+        :file-list="fileList"
+        :on-preview="handlePictureCardPreview"
+        :class="{hide: this.fileList.length >= this.limit}"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
@ -29,21 +29,21 @@
    </div>

    <el-dialog
-      :visible.sync="dialogVisible"
-      title="预览"
-      width="800"
-      append-to-body
+        :visible.sync="dialogVisible"
+        title="预览"
+        width="800"
+        append-to-body
    >
      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
+          :src="dialogImageUrl"
+          style="display: block; max-width: 100%; margin: 0 auto"
      />
    </el-dialog>
  </div>
 </template>

 <script>
-import {getToken} from "@/utils/auth";
+import { getAccessToken } from "@/utils/auth";

 export default {
  props: {
@ -76,12 +76,8 @@ export default {
      dialogImageUrl: "",
      dialogVisible: false,
      hideUpload: false,
-      // todo /infra/file/upload 返回的都是带 host 的可访问地址, baseUrl 有点没必要
-      baseUrl: process.env.VUE_APP_BASE_API,
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
+      headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
      fileList: []
    };
  },
@ -94,12 +90,8 @@ export default {
          // 然后将数组转为对象数组
          this.fileList = list.map(item => {
            if (typeof item === "string") {
-              // 不带有 http 的路径, 才拼接 baseUrl.
-              if (item.indexOf("http") === -1) {
-                item = {name: this.baseUrl + item, url: this.baseUrl + item};
-              } else {
-                item = {name: item, url: item};
-              }
+              // edit by 芋道源码
+              item = { name: item, url: item };
            }
            return item;
          });
@ -129,7 +121,8 @@ export default {
    },
    // 上传成功回调
    handleUploadSuccess(res) {
-      this.uploadList.push({name: res.data.fileName, url: res.data.fileUrl});
+      // edit by 芋道源码
+      this.uploadList.push({ name: res.data, url: res.data });
      if (this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
@ -188,10 +181,9 @@ export default {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
-        // 由于 infra-file 返回带有 host , 不需要替换 baseUrl // .replace(this.baseUrl, "")
-        strs += list[i].url + separator;
+        strs += list[i].url.replace(this.baseUrl, "") + separator;
      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+      return strs !== '' ? strs.substr(0, strs.length - 1) : '';
    }
  }
 };
--- a/yudao-ui-admin/src/components/UploadImage/index.vue
+++ b/yudao-ui-admin/src/components/UploadImage/index.vue
@ -1,68 +0,0 @@
-<template>
-  <div class="component-upload-image">
-    <el-upload
-      :action="uploadImgUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :on-error="handleUploadError"
-      name="file"
-      :show-file-list="false"
-      :headers="headers"
-      style="display: inline-block; vertical-align: top"
-    >
-      <img v-if="value" :src="value" class="avatar" />
-      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-    </el-upload>
-  </div>
-</template>
-
-<script>
-import { getToken } from "@/utils/auth";
-
-export default {
-  components: {},
-  data() {
-    return {
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-    };
-  },
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-  },
-  methods: {
-    handleUploadSuccess(res) {
-      this.$emit("input", res.url);
-      this.loading.close();
-    },
-    handleBeforeUpload() {
-      this.loading = this.$loading({
-        lock: true,
-        text: "上传中",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-    },
-    handleUploadError() {
-      this.$message({
-        type: "error",
-        message: "上传失败",
-      });
-      this.loading.close();
-    },
-  },
-  watch: {},
-};
-</script>
-
-<style scoped lang="scss">
-.avatar {
-  width: 100%;
-  height: 100%;
-}
-</style>
--- a/yudao-ui-admin/src/components/generator/config.js
+++ b/yudao-ui-admin/src/components/generator/config.js
@ -499,7 +499,8 @@ export const selectComponents = [
    __slot__: {
      'list-type': true
    },
-    action: 'https://jsonplaceholder.typicode.com/posts/',
+    // action: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
+    action: '/infra/file/upload', // 请求地址
    disabled: false,
    accept: '',
    name: 'file',
--- a/yudao-ui-admin/src/components/parser/Parser.vue
+++ b/yudao-ui-admin/src/components/parser/Parser.vue
@ -1,6 +1,7 @@
 <script>
 import { deepClone } from '@/utils/index'
 import render from '@/components/render/render.js'
+import {getAccessToken} from "@/utils/auth";

 const ruleTrigger = {
  'el-input': 'blur',
@ -79,10 +80,51 @@ function formBtns(h) {
 }

 function renderFormItem(h, elementList) {
+  const that = this
+  const data = this[this.formConf.formModel]
+  // const formRef = that.$refs[that.formConf.formRef] // 这里直接添加有问题，此时还找不到表单 $refs
  return elementList.map(scheme => {
    const config = scheme.__config__
    const layout = layouts[config.layout]

+    // edit by 芋道源码，解决 el-upload 上传的问题
+    // 参考 https://github.com/JakHuang/form-generator/blob/master/src/components/parser/example/Index.vue 实现
+    const vModel = scheme.__vModel__
+    const val = data[vModel]
+    if (scheme.__config__.tag === 'el-upload') {
+      // 回显图片
+      scheme['file-list'] = (val || []).map(url => ({ name: url, url }))
+      // 上传地址 + 请求头
+      scheme.action = process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload"
+      scheme.headers = { Authorization: "Bearer " + getAccessToken() }
+      // 注意 on-success 不能绑定箭头函数！！！
+      scheme['on-success'] = function (response, file, fileList) {
+        if (response.code !== 0) {
+          return;
+        }
+        // 添加到 data 中
+        const prev = data[vModel] || []
+        this.$set(data, vModel, [
+          ...prev,
+          response.data
+        ])
+        // 发起表单校验
+        that.$refs[that.formConf.formRef].validateField(vModel)
+      }
+      // 注意 on-remove 不能绑定箭头函数！！！
+      scheme['on-remove'] = function (file, fileList) {
+        // 移除从 data 中
+        const prev = data[vModel] || []
+        const index = prev.indexOf(file.response.data)
+        if (index === -1) {
+          return
+        }
+        prev.splice(index, 1) // 直接移除即可，无需重复 set，因为 array 是引用
+        // 发起表单校验
+        that.$refs[that.formConf.formRef].validateField(vModel)
+      }
+    }
+
    if (layout) {
      return layout.call(this, h, scheme)
    }