添加oss打包

package.json

@@ -4,7 +4,6 @@
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
@@ -46,6 +45,7 @@
     "clipboard": "^2.0.6",
     "codemirror": "^5.58.1",
     "core-js": "^2.6.11",
+    "cos-js-sdk-v5": "^1.4.20",
     "dayjs": "^1.11.3",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",

src/components/VueFormMaking/components/Upload/file.vue

@@ -1,94 +1,96 @@
-<template>
-  <div>
-    <el-upload
-      action="/api-web/import/oaUploadFile"
-      :on-success="handleSuccess"
-      :on-preview="handlePreview"
-      :on-remove="handleRemove"
-      :before-upload="beforeUploadFile"
-      :before-remove="beforeRemove"
-      multiple
-      :limit="element.options.length"
-      :headers="element.options.headers"
-      :on-exceed="handleExceed"
-      :data="uploadData"
-      :file-list="dataModel"
-      :disabled="element.options.disabled"
-      :style="{ width: element.options.width }"
-    >
-      <div v-if="!preview">
-        <el-button size="small" type="primary">点击上传</el-button>
-        <div slot="tip" class="el-upload__tip">{{ element.options.tip }}</div>
-      </div>
-    </el-upload>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "FileUpload",
-  // eslint-disable-next-line vue/require-prop-types
-  props: ["element", "preview", "dataModel"],
-  data() {
-    return {
-      fileListTmp: [],
-      uploadData: {}
-    };
-  },
-  mounted() {
-    const query = this.$route.query;
-    if (query.processId) {
-      this.uploadData.processId = query.processId;
-    }
-  },
-  methods: {
-    handleRemove(file, fileList) {
-      this.fileListTmp = fileList;
-      this.$emit("fileList", fileList);
-    },
-    handlePreview(file) {
-      window.open(file.url, "_blank");
-    },
-    handleExceed(files, fileList) {
-      this.$message.warning(
-        `最多允许上传 ${this.element.options.length} 个文件。`
-      );
-    },
-    async beforeUploadFile(file) {
-      return new Promise((resolve, reject) => {
-        const isLt2M = file.size / 1024 / 1024 < 20;
-        if (!isLt2M) {
-          this.$message.error("上传附件大小不能超过 20MB!");
-          return reject(false);
-        } else {
-          return resolve(true);
-        }
-      });
-    },
-    beforeRemove(file, fileList) {
-      // return this.$confirm(`确定要移除 ${file.name}？`);
-    },
-    handleSuccess(response, file, fileList) {
-      console.log(response, file, fileList);
-      if (response.code === 200) {
-        this.fileListTmp.push({
-          uid: file.uid,
-          name: file.name,
-          url: response.data.url,
-          file: {
-            name: file.name
-          }
-        });
-        this.$emit("fileList", this.fileListTmp);
-      } else {
-        const index = fileList.findIndex(item => item.uid === file.uid);
-        fileList.splice(index, 1);
-
-        this.$message.error(response.msg);
-      }
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <div>
+    <el-upload
+      action="/api-web/import/oaUploadFile"
+      :on-success="handleSuccess"
+      :on-preview="handlePreview"
+      :on-remove="handleRemove"
+      :before-upload="beforeUploadFile"
+      :before-remove="beforeRemove"
+      multiple
+      :limit="element.options.length"
+      :headers="element.options.headers"
+      :on-exceed="handleExceed"
+      :data="uploadData"
+      :file-list="dataModel"
+      :disabled="element.options.disabled"
+      :style="{ width: element.options.width }"
+    >
+      <div v-if="!preview">
+        <el-button size="small" type="primary">点击上传</el-button>
+        <div slot="tip" class="el-upload__tip">{{ element.options.tip }}</div>
+      </div>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FileUpload",
+  // eslint-disable-next-line vue/require-prop-types
+  props: ["element", "preview", "dataModel"],
+  data() {
+    return {
+      fileListTmp: [],
+      uploadData: {
+        pluginName: "tencent",
+      },
+    };
+  },
+  mounted() {
+    const query = this.$route.query;
+    if (query.processId) {
+      this.uploadData.processId = query.processId;
+    }
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      this.fileListTmp = fileList;
+      this.$emit("fileList", fileList);
+    },
+    handlePreview(file) {
+      window.open(file.url, "_blank");
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `最多允许上传 ${this.element.options.length} 个文件。`
+      );
+    },
+    async beforeUploadFile(file) {
+      return new Promise((resolve, reject) => {
+        const isLt2M = file.size / 1024 / 1024 < 20;
+        if (!isLt2M) {
+          this.$message.error("上传附件大小不能超过 20MB!");
+          return reject(false);
+        } else {
+          return resolve(true);
+        }
+      });
+    },
+    beforeRemove(file, fileList) {
+      // return this.$confirm(`确定要移除 ${file.name}？`);
+    },
+    handleSuccess(response, file, fileList) {
+      console.log(response, file, fileList);
+      if (response.code === 200) {
+        this.fileListTmp.push({
+          uid: file.uid,
+          name: file.name,
+          url: response.data.url,
+          file: {
+            name: file.name,
+          },
+        });
+        this.$emit("fileList", this.fileListTmp);
+      } else {
+        const index = fileList.findIndex((item) => item.uid === file.uid);
+        fileList.splice(index, 1);
+
+        this.$message.error(response.msg);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped></style>

src/components/VueFormMaking/components/Upload/index.vue

@@ -1,706 +1,721 @@
-<template>
-  <div :id="uploadId" class="fm-uplaod-container">
-    <draggable
-      v-model="fileList"
-      class="drag-img-list"
-      v-bind="{ group: uploadId, ghostClass: 'ghost', animation: 200 }"
-      :no-transition-on-drag="true"
-    >
-      <div
-        v-for="item in fileList"
-        :id="item.key"
-        :key="item.key"
-        :style="{ width: width + 'px', height: height + 'px' }"
-        :class="{
-          uploading: item.status == 'uploading',
-          'is-success': item.status == 'success',
-          'is-diabled': disabled,
-        }"
-        class="upload-file"
-      >
-        <img :src="item.url" />
-
-        <el-progress
-          v-if="item.status == 'uploading'"
-          :width="miniWidth * 0.9"
-          class="upload-progress"
-          type="circle"
-          :percentage="item.percent"
-        />
-
-        <label v-if="item.status == 'success'" class="item-status">
-          <i class="el-icon-upload-success el-icon-check" />
-        </label>
-
-        <div
-          v-if="!disabled"
-          class="uplaod-action"
-          :style="{ height: miniWidth / 4 + 'px' }"
-        >
-          <i
-            class="iconfont icon-tupianyulan"
-            :title="'预览'"
-            :style="{ 'font-size': miniWidth / 8 + 'px' }"
-            @click="handlePreviewFile(item.key)"
-          />
-          <!-- <i
-            v-if="isEdit"
-            class="iconfont icon-sync1"
-            :title="'替换'"
-            :style="{ 'font-size': miniWidth / 8 + 'px' }"
-            @click="handleEdit(item.key)"
-          /> -->
-          <i
-            class="iconfont icon-delete"
-            :title="'删除'"
-            :style="{ 'font-size': miniWidth / 8 + 'px' }"
-            @click="handleRemove(item.key)"
-          />
-        </div>
-      </div>
-    </draggable>
-    <!-- @click.self="handleAdd" -->
-    <div
-      v-if="!preview"
-      v-show="(!isQiniu || (isQiniu && token)) && fileList.length < length"
-      class="el-upload el-upload--picture-card"
-      :class="{ 'is-disabled': disabled }"
-      :style="{ width: width + 'px', height: height + 'px' }"
-    >
-      <el-upload
-        :action="ossUploadUrl"
-        :on-success="handleSuccess"
-        :on-exceed="handleExceed"
-        :before-upload="beforeUpload"
-        :show-file-list="false"
-        accept="image/*"
-        :limit="5"
-        :data="dataObj"
-        style="width: 100%; height: 100%"
-      >
-        <i
-          class="el-icon-plus"
-          :style="{
-            fontSize: miniWidth / 4 + 'px',
-            marginTop: -miniWidth / 8 + 'px',
-            marginLeft: -miniWidth / 8 + 'px',
-          }"
-        ></i>
-      </el-upload>
-      <!-- <i
-        class="el-icon-plus"
-        :style="{
-          fontSize: miniWidth / 4 + 'px',
-          marginTop: -miniWidth / 8 + 'px',
-          marginLeft: -miniWidth / 8 + 'px'
-        }"
-        @click.self="handleAdd"
-      />
-      <input
-        v-if="multiple"
-        ref="uploadInput"
-        accept="image/*"
-        multiple
-        type="file"
-        :style="{ width: 0, height: 0 }"
-        name="file"
-        class="el-upload__input upload-input"
-        @change="handleChange"
-      />
-      <input
-        v-else
-        ref="uploadInput"
-        accept="image/*"
-        type="file"
-        :style="{ width: 0, height: 0 }"
-        name="file"
-        class="el-upload__input upload-input"
-        @change="handleChange"
-      /> -->
-    </div>
-  </div>
-</template>
-
-<script>
-import Vue from "vue";
-import Viewer from "viewerjs";
-import Draggable from "vuedraggable";
-import * as qiniu from "qiniu-js";
-require("viewerjs/dist/viewer.css");
-import { policy } from "@/api/user";
-import VueI18n from "vue-i18n";
-Vue.use(VueI18n);
-export default {
-  components: {
-    Draggable,
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    width: {
-      type: Number,
-      default: 100,
-    },
-    height: {
-      type: Number,
-      default: 100,
-    },
-    token: {
-      type: String,
-      default: "",
-    },
-    domain: {
-      type: String,
-      default: "",
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    length: {
-      type: Number,
-      default: 9,
-    },
-    isQiniu: {
-      type: Boolean,
-      default: false,
-    },
-    isDelete: {
-      type: Boolean,
-      default: true,
-    },
-    min: {
-      type: Number,
-      default: 0,
-    },
-    meitu: {
-      type: Boolean,
-      default: false,
-    },
-    isEdit: {
-      type: Boolean,
-      default: false,
-    },
-    action: {
-      type: String,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    preview: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      fileList: this.value.map((item) => {
-        return {
-          key: item.key
-            ? item.key
-            : new Date().getTime() + "_" + Math.ceil(Math.random() * 99999),
-          url: item.url,
-          percent: item.percent ? item.percent : 100,
-          status: item.status ? item.status : "success",
-        };
-      }),
-      viewer: null,
-      uploadId: "upload_" + new Date().getTime(),
-      editIndex: -1,
-      meituIndex: -1,
-      // ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/daya",
-      ossUploadUrl: "https://daya.ks3-cn-beijing.ksyuncs.com",
-      dataObj: {
-        policy: "",
-        signature: "",
-        key: "",
-        KSSAccessKeyId: "",
-        acl: "public-read",
-        name: "",
-      },
-    };
-  },
-  computed: {
-    miniWidth() {
-      if (this.width > this.height) {
-        return this.height;
-      } else {
-        return this.width;
-      }
-    },
-  },
-  watch: {
-    fileList: {
-      deep: true,
-      handler(val) {
-        // this.$emit('input', this.fileList)
-      },
-    },
-  },
-  mounted() {
-    this.$emit("input", this.fileList);
-  },
-  methods: {
-    handleExceed(files, fileList) {
-      this.$message.warning(`最多允许上传 5 张图片。`);
-    },
-    async beforeUpload(file) {
-      const isLt2M = file.size / 1024 / 1024 < 5;
-      if (!isLt2M) {
-        this.$message.error("上传图片大小不能超过 5MB!");
-        return;
-      }
-      try {
-        let filename = file.name.replaceAll(" ", "_");
-        let key = new Date().getTime() + filename;
-        let obj = {
-          filename,
-          bucketName: "daya",
-          postData: {
-            filename,
-            acl: "public-read",
-            key,
-            unknowValueField: [],
-          },
-        };
-
-        const res = await policy(obj);
-        this.dataObj = {
-          policy: res.data.policy,
-          signature: res.data.signature,
-          key,
-          KSSAccessKeyId: res.data.kssAccessKeyId,
-          acl: "public-read",
-          name: filename,
-        };
-
-        return isLt2M;
-      } catch {
-        return false;
-      }
-    },
-    handleSuccess(response, file, fileList) {
-      let url = this.ossUploadUrl + "/" + this.dataObj.key;
-      this.fileList.push({
-        uid: file.uid,
-        name: file.name,
-        url,
-        percent: 100,
-      });
-    },
-    handleChange() {
-      const files = this.$refs.uploadInput.files;
-
-      for (let i = 0; i < files.length; i++) {
-        const file = files[i];
-        const reader = new FileReader();
-        const key =
-          new Date().getTime() + "_" + Math.ceil(Math.random() * 99999);
-        reader.readAsDataURL(file);
-        reader.onload = () => {
-          if (this.editIndex >= 0) {
-            this.$set(this.fileList, this.editIndex, {
-              key,
-              url: reader.result,
-              percent: 0,
-              status: "uploading",
-            });
-
-            this.editIndex = -1;
-          } else {
-            this.fileList.push({
-              key,
-              url: reader.result,
-              percent: 0,
-              status: "uploading",
-            });
-          }
-
-          this.$nextTick(() => {
-            this.uplaodAction(reader.result, file, key);
-            // if (this.isQiniu) {
-            //   this.uplaodAction2(reader.result, file, key)
-            // } else {
-            //   this.uplaodAction(reader.result, file, key)
-            // }
-          });
-        };
-      }
-      this.$refs.uploadInput.value = [];
-    },
-    async uplaodAction(res, file, key) {
-      try {
-        let filename = file.name.replaceAll(" ", "_");
-        let key = new Date().getTime() + filename;
-        let obj = {
-          filename,
-          bucketName: "daya",
-          postData: {
-            filename,
-            acl: "public-read",
-            key,
-            unknowValueField: [],
-          },
-        };
-        const res = await policy(obj);
-        this.dataObj = {
-          policy: res.data.policy,
-          signature: res.data.signature,
-          key,
-          KSSAccessKeyId: res.data.kssAccessKeyId,
-          acl: "public-read",
-          name: filename,
-        };
-      } catch {}
-      // eslint-disable-next-line no-unused-vars
-      const changeIndex = this.fileList.findIndex((item) => item.key === key);
-      const xhr = new XMLHttpRequest();
-
-      const url = this.ossUploadUrl;
-      xhr.open("POST", url, true);
-      // xhr.setRequestHeader('Content-Type', 'multipart/form-data')
-
-      const formData = new FormData();
-      formData.append(this.dataObj.name, file, this.dataObj.name);
-      formData.append("policy", this.dataObj.policy);
-      formData.append("signature", this.dataObj.signature);
-      formData.append("key", this.dataObj.key);
-      formData.append("KSSAccessKeyId", this.dataObj.KSSAccessKeyId);
-      formData.append("acl", "public-read");
-      formData.append("name", this.dataObj.name);
-
-      xhr.send(formData);
-      xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4) {
-          console.log(xhr, "xhr");
-          const tempData = JSON.parse(xhr.response);
-          const resData = tempData.data;
-          var uploadUrl = "";
-          if (
-            resData.url !== undefined &&
-            resData.url !== null &&
-            resData.url !== ""
-          ) {
-            uploadUrl = resData.url;
-          } else if (
-            resData.data !== undefined &&
-            resData.data !== null &&
-            resData.data !== ""
-          ) {
-            uploadUrl = resData.data;
-          }
-          if (resData && uploadUrl) {
-            this.$set(
-              this.fileList,
-              this.fileList.findIndex((item) => item.key === key),
-              {
-                ...this.fileList[
-                  this.fileList.findIndex((item) => item.key === key)
-                ],
-                url: uploadUrl,
-                percent: 100,
-              }
-            );
-            setTimeout(() => {
-              this.$set(
-                this.fileList,
-                this.fileList.findIndex((item) => item.key === key),
-                {
-                  ...this.fileList[
-                    this.fileList.findIndex((item) => item.key === key)
-                  ],
-                  status: "success",
-                }
-              );
-              this.$emit("input", this.fileList);
-            }, 200);
-          } else {
-            this.$set(
-              this.fileList,
-              this.fileList.findIndex((item) => item.key === key),
-              {
-                ...this.fileList[
-                  this.fileList.findIndex((item) => item.key === key)
-                ],
-                status: "error",
-              }
-            );
-            this.fileList.splice(
-              this.fileList.findIndex((item) => item.key === key),
-              1
-            );
-          }
-        }
-      };
-      xhr.onprogress = (res) => {
-        if (res.total && res.loaded) {
-          this.$set(
-            this.fileList[this.fileList.findIndex((item) => item.key === key)],
-            "percent",
-            (res.loaded / res.total) * 100
-          );
-        }
-      };
-    },
-    uplaodAction2(res, file, key) {
-      const _this = this;
-      const observable = qiniu.upload(
-        file,
-        key,
-        this.token,
-        {
-          fname: key,
-          mimeType: [],
-        },
-        {
-          useCdnDomain: true,
-          region: qiniu.region.z2,
-        }
-      );
-      observable.subscribe({
-        next(res) {
-          _this.$set(
-            _this.fileList[
-              _this.fileList.findIndex((item) => item.key === key)
-            ],
-            "percent",
-            parseInt(res.total.percent)
-          );
-        },
-        // eslint-disable-next-line handle-callback-err
-        error(err) {
-          _this.$set(
-            _this.fileList,
-            _this.fileList.findIndex((item) => item.key === key),
-            {
-              ..._this.fileList[
-                _this.fileList.findIndex((item) => item.key === key)
-              ],
-              status: "error",
-            }
-          );
-          _this.fileList.splice(
-            _this.fileList.findIndex((item) => item.key === key),
-            1
-          );
-        },
-        complete(res) {
-          _this.$set(
-            _this.fileList,
-            _this.fileList.findIndex((item) => item.key === key),
-            {
-              ..._this.fileList[
-                _this.fileList.findIndex((item) => item.key === key)
-              ],
-              url: _this.domain + res.key,
-              percent: 100,
-            }
-          );
-          setTimeout(() => {
-            _this.$set(
-              _this.fileList,
-              _this.fileList.findIndex((item) => item.key === key),
-              {
-                ..._this.fileList[
-                  _this.fileList.findIndex((item) => item.key === key)
-                ],
-                status: "success",
-              }
-            );
-            _this.$emit("input", _this.fileList);
-          }, 200);
-        },
-      });
-    },
-    handleRemove(key) {
-      this.fileList.splice(
-        this.fileList.findIndex((item) => item.key === key),
-        1
-      );
-    },
-    handleEdit(key) {
-      this.editIndex = this.fileList.findIndex((item) => item.key === key);
-
-      this.$refs.uploadInput.click();
-    },
-    handleMeitu(key) {
-      this.$emit(
-        "on-meitu",
-        this.fileList.findIndex((item) => item.key === key)
-      );
-    },
-    handleAdd() {
-      if (!this.disabled) {
-        this.editIndex = -1;
-        this.$refs.uploadInput.click();
-      }
-    },
-    handlePreviewFile(key) {
-      this.viewer && this.viewer.destroy();
-      this.uploadId = "upload_" + new Date().getTime();
-
-      this.$nextTick(() => {
-        this.viewer = new Viewer(document.getElementById(this.uploadId));
-        this.viewer.view(this.fileList.findIndex((item) => item.key === key));
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.fm-uplaod-container {
-  .is-disabled {
-    position: relative;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      // background: rgba(0,0,0,.1);
-      content: "";
-      display: block;
-      cursor: not-allowed;
-    }
-  }
-
-  .upload-file {
-    margin: 0 10px 10px 0;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    // background: #fff;
-    overflow: hidden;
-    background-color: #fff;
-    border: 1px solid #c0ccda;
-    border-radius: 6px;
-    box-sizing: border-box;
-    position: relative;
-    vertical-align: top;
-    &:hover {
-      .uplaod-action {
-        display: flex;
-      }
-    }
-    .uplaod-action {
-      position: absolute;
-      // top: 0;
-      // height: 30px;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background: rgba(0, 0, 0, 0.6);
-      display: none;
-      justify-content: center;
-      align-items: center;
-      i {
-        color: #fff;
-        cursor: pointer;
-        margin: 0 5px;
-      }
-    }
-    &.is-success {
-      .item-status {
-        position: absolute;
-        right: -15px;
-        top: -6px;
-        width: 40px;
-        height: 24px;
-        background: #13ce66;
-        text-align: center;
-        transform: rotate(45deg);
-        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
-        & > i {
-          font-size: 12px;
-          margin-top: 11px;
-          color: #fff;
-          transform: rotate(-45deg);
-        }
-      }
-    }
-    &.uploading {
-      &:before {
-        display: block;
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.3);
-      }
-    }
-    .upload-progress {
-      position: absolute;
-      .el-progress__text {
-        color: #fff;
-        font-size: 16px !important;
-      }
-    }
-    img {
-      max-width: 100%;
-      max-height: 100%;
-      vertical-align: middle;
-    }
-  }
-  .el-upload--picture-card {
-    position: relative;
-    overflow: hidden;
-    .el-icon-plus {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-    }
-  }
-  .upload-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: block;
-    opacity: 0;
-    cursor: pointer;
-  }
-  .el-upload--text {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  .drag-img-list {
-    display: inline;
-
-    .ghost {
-      position: relative;
-      &::after {
-        width: 100%;
-        height: 100%;
-        display: block;
-        content: "";
-        background: #fbfdff;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        border: 1px dashed #3bb3c2;
-      }
-    }
-
-    & > div {
-      cursor: move;
-    }
-  }
-}
-
-.viewer-container {
-  z-index: 9999 !important;
-}
-</style>
+<template>
+  <div :id="uploadId" class="fm-uplaod-container">
+    <draggable
+      v-model="fileList"
+      class="drag-img-list"
+      v-bind="{ group: uploadId, ghostClass: 'ghost', animation: 200 }"
+      :no-transition-on-drag="true"
+    >
+      <div
+        v-for="item in fileList"
+        :id="item.key"
+        :key="item.key"
+        :style="{ width: width + 'px', height: height + 'px' }"
+        :class="{
+          uploading: item.status == 'uploading',
+          'is-success': item.status == 'success',
+          'is-diabled': disabled,
+        }"
+        class="upload-file"
+      >
+        <img :src="item.url" />
+
+        <el-progress
+          v-if="item.status == 'uploading'"
+          :width="miniWidth * 0.9"
+          class="upload-progress"
+          type="circle"
+          :percentage="item.percent"
+        />
+
+        <label v-if="item.status == 'success'" class="item-status">
+          <i class="el-icon-upload-success el-icon-check" />
+        </label>
+
+        <div
+          v-if="!disabled"
+          class="uplaod-action"
+          :style="{ height: miniWidth / 4 + 'px' }"
+        >
+          <i
+            class="iconfont icon-tupianyulan"
+            :title="'预览'"
+            :style="{ 'font-size': miniWidth / 8 + 'px' }"
+            @click="handlePreviewFile(item.key)"
+          />
+          <!-- <i
+            v-if="isEdit"
+            class="iconfont icon-sync1"
+            :title="'替换'"
+            :style="{ 'font-size': miniWidth / 8 + 'px' }"
+            @click="handleEdit(item.key)"
+          /> -->
+          <i
+            class="iconfont icon-delete"
+            :title="'删除'"
+            :style="{ 'font-size': miniWidth / 8 + 'px' }"
+            @click="handleRemove(item.key)"
+          />
+        </div>
+      </div>
+    </draggable>
+    <!-- @click.self="handleAdd" -->
+    <div
+      v-if="!preview"
+      v-show="(!isQiniu || (isQiniu && token)) && fileList.length < length"
+      class="el-upload el-upload--picture-card"
+      :class="{ 'is-disabled': disabled }"
+      :style="{ width: width + 'px', height: height + 'px' }"
+    >
+      <el-upload
+        :action="ossUploadUrl"
+        :http-request="handleSuccess"
+        :on-exceed="handleExceed"
+        :before-upload="beforeUpload"
+        :show-file-list="false"
+        accept="image/*"
+        :limit="5"
+        :data="dataObj"
+        style="width: 100%; height: 100%"
+      >
+        <i
+          class="el-icon-plus"
+          :style="{
+            fontSize: miniWidth / 4 + 'px',
+            marginTop: -miniWidth / 8 + 'px',
+            marginLeft: -miniWidth / 8 + 'px',
+          }"
+        ></i>
+      </el-upload>
+      <!-- <i
+        class="el-icon-plus"
+        :style="{
+          fontSize: miniWidth / 4 + 'px',
+          marginTop: -miniWidth / 8 + 'px',
+          marginLeft: -miniWidth / 8 + 'px'
+        }"
+        @click.self="handleAdd"
+      />
+      <input
+        v-if="multiple"
+        ref="uploadInput"
+        accept="image/*"
+        multiple
+        type="file"
+        :style="{ width: 0, height: 0 }"
+        name="file"
+        class="el-upload__input upload-input"
+        @change="handleChange"
+      />
+      <input
+        v-else
+        ref="uploadInput"
+        accept="image/*"
+        type="file"
+        :style="{ width: 0, height: 0 }"
+        name="file"
+        class="el-upload__input upload-input"
+        @change="handleChange"
+      /> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import Viewer from "viewerjs";
+import Draggable from "vuedraggable";
+import * as qiniu from "qiniu-js";
+require("viewerjs/dist/viewer.css");
+import { policy } from "@/api/user";
+import VueI18n from "vue-i18n";
+Vue.use(VueI18n);
+import { getUploadSign, onOnlyFileUpload } from "@/helpers/oss-file-upload";
+export default {
+  components: {
+    Draggable,
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    width: {
+      type: Number,
+      default: 100,
+    },
+    height: {
+      type: Number,
+      default: 100,
+    },
+    token: {
+      type: String,
+      default: "",
+    },
+    domain: {
+      type: String,
+      default: "",
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    length: {
+      type: Number,
+      default: 9,
+    },
+    isQiniu: {
+      type: Boolean,
+      default: false,
+    },
+    isDelete: {
+      type: Boolean,
+      default: true,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    meitu: {
+      type: Boolean,
+      default: false,
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    action: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    preview: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      fileList: this.value.map((item) => {
+        return {
+          key: item.key
+            ? item.key
+            : new Date().getTime() + "_" + Math.ceil(Math.random() * 99999),
+          url: item.url,
+          percent: item.percent ? item.percent : 100,
+          status: item.status ? item.status : "success",
+        };
+      }),
+      viewer: null,
+      uploadId: "upload_" + new Date().getTime(),
+      editIndex: -1,
+      meituIndex: -1,
+      // ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/daya",
+      ossUploadUrl: "https://daya.ks3-cn-beijing.ksyuncs.com",
+      dataObj: {
+        policy: "",
+        signature: "",
+        key: "",
+        KSSAccessKeyId: "",
+        acl: "public-read",
+        name: "",
+      },
+    };
+  },
+  computed: {
+    miniWidth() {
+      if (this.width > this.height) {
+        return this.height;
+      } else {
+        return this.width;
+      }
+    },
+  },
+  watch: {
+    fileList: {
+      deep: true,
+      handler(val) {
+        // this.$emit('input', this.fileList)
+      },
+    },
+  },
+  mounted() {
+    this.$emit("input", this.fileList);
+  },
+  methods: {
+    handleExceed(files, fileList) {
+      this.$message.warning(`最多允许上传 5 张图片。`);
+    },
+    async beforeUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 5;
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过 5MB!");
+        return;
+      }
+      try {
+        let filename = file.name.replaceAll(" ", "_");
+        let key = new Date().getTime() + filename;
+        let obj = {
+          filename,
+          bucketName: "daya",
+          postData: {
+            filename,
+            acl: "public-read",
+            key,
+          },
+        };
+
+        // const res = await policy(obj);
+        const res = await getUploadSign(obj);
+        this.dataObj = {
+          policy: res.data.policy,
+          signature: res.data.signature,
+          key,
+          KSSAccessKeyId: res.data.kssAccessKeyId,
+          acl: "public-read",
+          name: filename,
+        };
+
+        return isLt2M;
+      } catch {
+        return false;
+      }
+    },
+    async handleSuccess(info) {
+      try {
+        const obj = {
+          policy: info.data.policy,
+          signature: info.data.signature,
+          key: info.data.key,
+          KSSAccessKeyId: info.data.kssAccessKeyId,
+          acl: "public-read",
+          name: info.data.key,
+          file: info.file,
+        };
+        const url = await onOnlyFileUpload(this.ossUploadUrl, obj);
+        this.fileList.push({
+          uid: info.file.uid,
+          name: info.file.name,
+          url,
+          percent: 100,
+        });
+      } catch (e) {
+        //
+        console.log(e, "e.message");
+      }
+    },
+    handleChange() {
+      const files = this.$refs.uploadInput.files;
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const reader = new FileReader();
+        const key =
+          new Date().getTime() + "_" + Math.ceil(Math.random() * 99999);
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          if (this.editIndex >= 0) {
+            this.$set(this.fileList, this.editIndex, {
+              key,
+              url: reader.result,
+              percent: 0,
+              status: "uploading",
+            });
+
+            this.editIndex = -1;
+          } else {
+            this.fileList.push({
+              key,
+              url: reader.result,
+              percent: 0,
+              status: "uploading",
+            });
+          }
+
+          this.$nextTick(() => {
+            this.uplaodAction(reader.result, file, key);
+            // if (this.isQiniu) {
+            //   this.uplaodAction2(reader.result, file, key)
+            // } else {
+            //   this.uplaodAction(reader.result, file, key)
+            // }
+          });
+        };
+      }
+      this.$refs.uploadInput.value = [];
+    },
+    async uplaodAction(res, file, key) {
+      try {
+        let filename = file.name.replaceAll(" ", "_");
+        let key = new Date().getTime() + filename;
+        let obj = {
+          filename,
+          bucketName: "daya",
+          postData: {
+            filename,
+            acl: "public-read",
+            key,
+            unknowValueField: [],
+          },
+        };
+        const res = await policy(obj);
+        this.dataObj = {
+          policy: res.data.policy,
+          signature: res.data.signature,
+          key,
+          KSSAccessKeyId: res.data.kssAccessKeyId,
+          acl: "public-read",
+          name: filename,
+        };
+      } catch {}
+      // eslint-disable-next-line no-unused-vars
+      const changeIndex = this.fileList.findIndex((item) => item.key === key);
+      const xhr = new XMLHttpRequest();
+
+      const url = this.ossUploadUrl;
+      xhr.open("POST", url, true);
+      // xhr.setRequestHeader('Content-Type', 'multipart/form-data')
+
+      const formData = new FormData();
+      formData.append(this.dataObj.name, file, this.dataObj.name);
+      formData.append("policy", this.dataObj.policy);
+      formData.append("signature", this.dataObj.signature);
+      formData.append("key", this.dataObj.key);
+      formData.append("KSSAccessKeyId", this.dataObj.KSSAccessKeyId);
+      formData.append("acl", "public-read");
+      formData.append("name", this.dataObj.name);
+
+      xhr.send(formData);
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+          console.log(xhr, "xhr");
+          const tempData = JSON.parse(xhr.response);
+          const resData = tempData.data;
+          var uploadUrl = "";
+          if (
+            resData.url !== undefined &&
+            resData.url !== null &&
+            resData.url !== ""
+          ) {
+            uploadUrl = resData.url;
+          } else if (
+            resData.data !== undefined &&
+            resData.data !== null &&
+            resData.data !== ""
+          ) {
+            uploadUrl = resData.data;
+          }
+          if (resData && uploadUrl) {
+            this.$set(
+              this.fileList,
+              this.fileList.findIndex((item) => item.key === key),
+              {
+                ...this.fileList[
+                  this.fileList.findIndex((item) => item.key === key)
+                ],
+                url: uploadUrl,
+                percent: 100,
+              }
+            );
+            setTimeout(() => {
+              this.$set(
+                this.fileList,
+                this.fileList.findIndex((item) => item.key === key),
+                {
+                  ...this.fileList[
+                    this.fileList.findIndex((item) => item.key === key)
+                  ],
+                  status: "success",
+                }
+              );
+              this.$emit("input", this.fileList);
+            }, 200);
+          } else {
+            this.$set(
+              this.fileList,
+              this.fileList.findIndex((item) => item.key === key),
+              {
+                ...this.fileList[
+                  this.fileList.findIndex((item) => item.key === key)
+                ],
+                status: "error",
+              }
+            );
+            this.fileList.splice(
+              this.fileList.findIndex((item) => item.key === key),
+              1
+            );
+          }
+        }
+      };
+      xhr.onprogress = (res) => {
+        if (res.total && res.loaded) {
+          this.$set(
+            this.fileList[this.fileList.findIndex((item) => item.key === key)],
+            "percent",
+            (res.loaded / res.total) * 100
+          );
+        }
+      };
+    },
+    uplaodAction2(res, file, key) {
+      const _this = this;
+      const observable = qiniu.upload(
+        file,
+        key,
+        this.token,
+        {
+          fname: key,
+          mimeType: [],
+        },
+        {
+          useCdnDomain: true,
+          region: qiniu.region.z2,
+        }
+      );
+      observable.subscribe({
+        next(res) {
+          _this.$set(
+            _this.fileList[
+              _this.fileList.findIndex((item) => item.key === key)
+            ],
+            "percent",
+            parseInt(res.total.percent)
+          );
+        },
+        // eslint-disable-next-line handle-callback-err
+        error(err) {
+          _this.$set(
+            _this.fileList,
+            _this.fileList.findIndex((item) => item.key === key),
+            {
+              ..._this.fileList[
+                _this.fileList.findIndex((item) => item.key === key)
+              ],
+              status: "error",
+            }
+          );
+          _this.fileList.splice(
+            _this.fileList.findIndex((item) => item.key === key),
+            1
+          );
+        },
+        complete(res) {
+          _this.$set(
+            _this.fileList,
+            _this.fileList.findIndex((item) => item.key === key),
+            {
+              ..._this.fileList[
+                _this.fileList.findIndex((item) => item.key === key)
+              ],
+              url: _this.domain + res.key,
+              percent: 100,
+            }
+          );
+          setTimeout(() => {
+            _this.$set(
+              _this.fileList,
+              _this.fileList.findIndex((item) => item.key === key),
+              {
+                ..._this.fileList[
+                  _this.fileList.findIndex((item) => item.key === key)
+                ],
+                status: "success",
+              }
+            );
+            _this.$emit("input", _this.fileList);
+          }, 200);
+        },
+      });
+    },
+    handleRemove(key) {
+      this.fileList.splice(
+        this.fileList.findIndex((item) => item.key === key),
+        1
+      );
+    },
+    handleEdit(key) {
+      this.editIndex = this.fileList.findIndex((item) => item.key === key);
+
+      this.$refs.uploadInput.click();
+    },
+    handleMeitu(key) {
+      this.$emit(
+        "on-meitu",
+        this.fileList.findIndex((item) => item.key === key)
+      );
+    },
+    handleAdd() {
+      if (!this.disabled) {
+        this.editIndex = -1;
+        this.$refs.uploadInput.click();
+      }
+    },
+    handlePreviewFile(key) {
+      this.viewer && this.viewer.destroy();
+      this.uploadId = "upload_" + new Date().getTime();
+
+      this.$nextTick(() => {
+        this.viewer = new Viewer(document.getElementById(this.uploadId));
+        this.viewer.view(this.fileList.findIndex((item) => item.key === key));
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.fm-uplaod-container {
+  .is-disabled {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      // background: rgba(0,0,0,.1);
+      content: "";
+      display: block;
+      cursor: not-allowed;
+    }
+  }
+
+  .upload-file {
+    margin: 0 10px 10px 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    // background: #fff;
+    overflow: hidden;
+    background-color: #fff;
+    border: 1px solid #c0ccda;
+    border-radius: 6px;
+    box-sizing: border-box;
+    position: relative;
+    vertical-align: top;
+    &:hover {
+      .uplaod-action {
+        display: flex;
+      }
+    }
+    .uplaod-action {
+      position: absolute;
+      // top: 0;
+      // height: 30px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(0, 0, 0, 0.6);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      i {
+        color: #fff;
+        cursor: pointer;
+        margin: 0 5px;
+      }
+    }
+    &.is-success {
+      .item-status {
+        position: absolute;
+        right: -15px;
+        top: -6px;
+        width: 40px;
+        height: 24px;
+        background: #13ce66;
+        text-align: center;
+        transform: rotate(45deg);
+        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
+        & > i {
+          font-size: 12px;
+          margin-top: 11px;
+          color: #fff;
+          transform: rotate(-45deg);
+        }
+      }
+    }
+    &.uploading {
+      &:before {
+        display: block;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+    .upload-progress {
+      position: absolute;
+      .el-progress__text {
+        color: #fff;
+        font-size: 16px !important;
+      }
+    }
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      vertical-align: middle;
+    }
+  }
+  .el-upload--picture-card {
+    position: relative;
+    overflow: hidden;
+    .el-icon-plus {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+    }
+  }
+  .upload-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    opacity: 0;
+    cursor: pointer;
+  }
+  .el-upload--text {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .drag-img-list {
+    display: inline;
+
+    .ghost {
+      position: relative;
+      &::after {
+        width: 100%;
+        height: 100%;
+        display: block;
+        content: "";
+        background: #fbfdff;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border: 1px dashed #3bb3c2;
+      }
+    }
+
+    & > div {
+      cursor: move;
+    }
+  }
+}
+
+.viewer-container {
+  z-index: 9999 !important;
+}
+</style>

src/helpers/oss-file-upload.js

@@ -0,0 +1,219 @@
+import request from "../utils/request";
+import axios from "axios";
+// import umiRequest from "umi-request";
+import COS from "cos-js-sdk-v5";
+export const ossSwitch = "tencent"; //as 'ks3' | 'tencent'; // 上传文件服务商
+const tencentBucket = "daya-online-1303457149";
+
+/**
+ * 管乐团 gyt/
+ * 酷乐秀 klx/
+ * 课堂乐器 ktqy/
+ * 管乐迷 gym/
+ */
+
+// 定义一个cos 对象
+/**
+ * 获取上传文件签名
+ * @param params 上传对应参数
+ * { filename: fileName,
+     bucketName: props.bucketName,
+     postData: {
+      filename: fileName,
+      acl: 'public-read',
+      key: fileName,
+      unknowValueField: []
+    }}
+ * @param oss 服务商 ks3 tencent
+ * @returns ”{'signatur'':'',''kssAccessKeyI'':'',''policy': '' }“
+ */
+export const getUploadSign = async (params) => {
+  const { bucketName, filename, postData } = params;
+  const ossType = ossSwitch;
+  let bucket = bucketName;
+  let file = filename;
+  // const key = postData.key;
+  let tempPostData = {};
+  if (ossType === "tencent") {
+    bucket = tencentBucket;
+    file = "gym/" + filename;
+
+    tempPostData = {
+      key: "gym/" + postData.key,
+    };
+  } else {
+    tempPostData = postData;
+  }
+  return request.post("/api-web/getUploadSign?pluginName=" + ossType, {
+    postData: tempPostData,
+    pluginName: ossType,
+    bucketName: bucket,
+    filename: file,
+  });
+};
+
+/**
+ * 使用组件上传时，调用方法
+ * @param param0
+ */
+export const onFileUpload = ({
+  file,
+  action,
+  data,
+  onProgress,
+  onFinish,
+  onError,
+}) => {
+  if (ossSwitch === "ks3") {
+    const fileParams = {
+      policy: data.policy,
+      signature: data.signature,
+      key: data.key,
+      acl: "public-read",
+      KSSAccessKeyId: data.KSSAccessKeyId,
+      name: data.name,
+    };
+    const formData = new FormData();
+    for (const key in fileParams) {
+      formData.append(key, fileParams[key]);
+    }
+    formData.append("file", data.file);
+    axios
+      .post(action, formData, {
+        onUploadProgress: ({ progress }) => {
+          onProgress({ percent: Math.ceil((progress || 0) * 100) });
+        },
+      })
+      .then(() => {
+        file.url = action + data.key;
+        onFinish();
+      })
+      .catch((error) => {
+        onError(error);
+      });
+  } else {
+    const cos = new COS({
+      Domain: "https://oss.dayaedu.com",
+      Protocol: "https",
+      // getAuthorization 必选参数
+      getAuthorization: async (options, callback) => {
+        callback({ Authorization: data.signature });
+      },
+    });
+    cos
+      .uploadFile({
+        Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
+        Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
+        Key: `gym/${data.name}`,
+        /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
+        Body: data.file.file, // 上传文件对象
+        SliceSize:
+          1024 *
+          1024 *
+          500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
+        onProgress: function (progressData) {
+          onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) });
+        },
+      })
+      .then((res) => {
+        // file.url = 'https://' + res.Location;
+        if (res.Location && res.Location.indexOf("http") >= 0) {
+          file.url = res.Location;
+        } else {
+          file.url = "https://" + res.Location;
+        }
+        onFinish();
+      })
+      .catch(() => {
+        onError();
+      });
+  }
+};
+
+export const onOnlyFileUpload = async (action, params) => {
+  if (ossSwitch === "ks3") {
+    const fileParams = {
+      policy: params.policy,
+      signature: params.signature,
+      key: params.key,
+      acl: "public-read",
+      KSSAccessKeyId: params.KSSAccessKeyId,
+      name: params.name,
+    };
+    const formData = new FormData();
+    for (const key in fileParams) {
+      formData.append(key, fileParams[key]);
+    }
+    formData.append("file", params.file);
+    let file = "";
+    let errorObj = null;
+    await axios
+      .post(action, formData, {
+        // onUploadProgress: ({ progress }) => {
+        //   console.log(progress);
+        //   onProgress({ percent: Math.ceil((progress || 0) * 100) });
+        // }
+      })
+      .then(() => {
+        file = action + params.key;
+      })
+      .catch((error) => {
+        // onError(error);
+        errorObj = error;
+        // throw new Error(error);
+      });
+    if (file) {
+      return file;
+    } else {
+      throw new Error(errorObj);
+    }
+  } else {
+    let file = "";
+    let errorObj = null;
+    // console.log(params, "params");
+    const cos = new COS({
+      Domain: "https://oss.dayaedu.com",
+      // getAuthorization 必选参数
+      getAuthorization: async (options, callback) => {
+        callback({ Authorization: params.signature });
+      },
+    });
+
+    await cos
+      .uploadFile({
+        Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
+        Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
+        Key: `gym/${params.name}`,
+        /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
+        Body: params.file, // 上传文件对象
+        SliceSize:
+          1024 *
+          1024 *
+          500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
+        // onProgress: function (progressData) {
+        //   onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) });
+        // }
+      })
+      .then((res) => {
+        // file.url = 'https://' + res.Location;
+        // file = 'https://' + res.Location;
+        if (res.Location && res.Location.indexOf("http") >= 0) {
+          file = res.Location;
+        } else {
+          file = "https://" + res.Location;
+        }
+        // onFinish();
+      })
+      .catch((error) => {
+        // console.log(error, 'error');
+        // onError();
+        // throw new Error(error);
+        errorObj = error;
+      });
+    if (file) {
+      return file;
+    } else {
+      throw new Error(errorObj);
+    }
+  }
+};

src/views/process/list/model/upload.vue

@@ -34,7 +34,7 @@
     <div class="upload_section">
       <el-upload
         :action="ossUploadUrl"
-        :on-success="handleSuccess"
+        :http-request="handleSuccess"
         :on-exceed="handleExceed"
         :on-error="handleError"
         :before-upload="beforeUpload"
@@ -55,7 +55,7 @@
       <el-upload
         :action="ossUploadUrl"
         style="margin-left: 8px"
-        :on-success="handleSuccess"
+        :http-request="handleSuccess"
         :on-exceed="handleExceedFile"
         :on-error="handleError"
         :before-upload="beforeUploadFile"
@@ -78,6 +78,7 @@
 
 <script>
 import { policy } from "@/api/user";
+import { getUploadSign, onOnlyFileUpload } from "@/helpers/oss-file-upload";
 export default {
   name: "FileUpload",
   props: ["fileUrl"],
@@ -137,7 +138,8 @@ export default {
           },
         };
 
-        const res = await policy(obj);
+        // const res = await policy(obj);
+        const res = await getUploadSign(obj);
         this.dataObj = {
           policy: res.data.policy,
           signature: res.data.signature,
@@ -179,7 +181,8 @@ export default {
           },
         };
 
-        const res = await policy(obj);
+        // const res = await policy(obj);
+        const res = await getUploadSign(obj);
         this.dataObj = {
           policy: res.data.policy,
           signature: res.data.signature,
@@ -205,22 +208,35 @@ export default {
       this.uploadFileLoading = false;
       this.uploadLoading = false;
     },
-    handleSuccess(response, file, fileList) {
+    async handleSuccess(info) {
       // console.log(response, file, fileList);
+      try {
+        const obj = {
+          policy: info.data.policy,
+          signature: info.data.signature,
+          key: info.data.key,
+          KSSAccessKeyId: info.data.kssAccessKeyId,
+          acl: "public-read",
+          name: info.data.key,
+          file: info.file,
+        };
+        const url = await onOnlyFileUpload(this.ossUploadUrl, obj);
+        this.tempFileUrl.push({
+          uid: info.file.uid,
+          name: info.file.name,
+          url,
+          type: this.type,
+          file: {
+            name: info.file.name,
+          },
+        });
+        this.$emit("update:fileList", this.tempFileUrl);
+      } catch (e) {
+        //
+        console.log(e, "e.message");
+      }
       this.uploadLoading = false;
       this.uploadFileLoading = false;
-
-      let url = this.ossUploadUrl + "/" + this.dataObj.key;
-      this.tempFileUrl.push({
-        uid: file.uid,
-        name: file.name,
-        url,
-        type: this.type,
-        file: {
-          name: file.name,
-        },
-      });
-      this.$emit("update:fileList", this.tempFileUrl);
     },
   },
 };

src/views/profile/userAvatar.vue

@@ -10,7 +10,7 @@
       class="img-circle img-lg"
       :action="ossUploadUrl"
       :show-file-list="false"
-      :on-success="handleAvatarSuccess"
+      :http-request="handleAvatarSuccess"
       :before-upload="beforeAvatarUpload"
       :data="dataObj"
     >
@@ -96,6 +96,7 @@ import store from "@/store";
 import { VueCropper } from "vue-cropper";
 import { uploadAvatar } from "@/api/system/sysuser";
 import { policy } from "@/api/user";
+import { getUploadSign, onOnlyFileUpload } from "@/helpers/oss-file-upload";
 export default {
   components: { VueCropper },
   props: {
@@ -141,48 +142,61 @@ export default {
         let filename = file.name.replaceAll(" ", "_");
         let key = new Date().getTime() + filename;
         let obj = {
-          filename,
+          filename: key,
           bucketName: "daya",
           postData: {
-            filename,
+            filename: key,
             acl: "public-read",
             key,
-            unknowValueField: [],
           },
         };
 
-        const res = await policy(obj);
+        // const res = await policy(obj);
+        const res = await getUploadSign(obj);
         this.dataObj = {
           policy: res.data.policy,
           signature: res.data.signature,
           key,
           KSSAccessKeyId: res.data.kssAccessKeyId,
           acl: "public-read",
-          name: filename,
+          name: key,
         };
-        console.log(res, "policy", this.dataObj);
 
         return isLt2M;
       } catch {
+        console.log(res, 12);
         return false;
       }
     },
-    handleAvatarSuccess(response, file, fileList) {
-      // console.log(response, file, fileList)
-
-      let url = this.ossUploadUrl + "/" + this.dataObj.key;
+    async handleAvatarSuccess(info) {
+      try {
+        const obj = {
+          policy: info.data.policy,
+          signature: info.data.signature,
+          key: info.data.key,
+          KSSAccessKeyId: info.data.kssAccessKeyId,
+          acl: "public-read",
+          name: info.data.key,
+          file: info.file,
+        };
+        console.log(info, this.ossUploadUrl, obj);
+        const url = await onOnlyFileUpload(this.ossUploadUrl, obj);
 
-      const formData = new FormData();
-      formData.append("avatar", url);
-      uploadAvatar({ avatar: url }).then((response) => {
-        if (response.code === 200) {
-          this.options.img = url;
-          store.dispatch("user/setAvatar", url);
-          this.msgSuccess("修改成功");
-        } else {
-          this.msgError(response.msg);
-        }
-      });
+        const formData = new FormData();
+        formData.append("avatar", url);
+        uploadAvatar({ avatar: url }).then((response) => {
+          if (response.code === 200) {
+            this.options.img = url;
+            store.dispatch("user/setAvatar", url);
+            this.msgSuccess("修改成功");
+          } else {
+            this.msgError(response.msg);
+          }
+        });
+      } catch (e) {
+        //
+        console.log(e, "e.message");
+      }
     },
     // 编辑头像
     editCropper() {

src/views/system/settings/index.vue

@@ -20,7 +20,7 @@
               :action="ossUploadUrl"
               :data="dataObj"
               :show-file-list="false"
-              :on-success="handleAvatarSuccess"
+              :http-request="handleAvatarSuccess"
               :before-upload="beforeAvatarUpload"
             >
               <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar" />
@@ -107,6 +107,7 @@
 <script>
 import { setSettings, getSettings } from "@/api/system/settings";
 import { policy } from "@/api/user";
+import { getUploadSign, onOnlyFileUpload } from "@/helpers/oss-file-upload";
 export default {
   components: {},
   data() {
@@ -206,9 +207,25 @@ export default {
     resetForm(formName) {
       this.$refs[formName].resetFields();
     },
-    handleAvatarSuccess(res, file) {
-      let url = this.ossUploadUrl + "/" + this.dataObj.key;
-      this.ruleForm.logo = url;
+    async handleAvatarSuccess(info) {
+      try {
+        const obj = {
+          policy: info.data.policy,
+          signature: info.data.signature,
+          key: info.data.key,
+          KSSAccessKeyId: info.data.kssAccessKeyId,
+          acl: "public-read",
+          name: info.data.key,
+          file: info.file,
+        };
+        console.log(info, this.ossUploadUrl, obj);
+        const url = await onOnlyFileUpload(this.ossUploadUrl, obj);
+
+        this.ruleForm.logo = url;
+      } catch (e) {
+        //
+        console.log(e, "e.message");
+      }
     },
     async beforeAvatarUpload(file) {
       const isLt2M = file.size / 1024 / 1024 < 2;
@@ -230,7 +247,8 @@ export default {
           },
         };
 
-        const res = await policy(obj);
+        // const res = await policy(obj);
+        const res = await getUploadSign(obj);
         this.dataObj = {
           policy: res.data.policy,
           signature: res.data.signature,