feat: #更改

src/components/MultUpload.vue

@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <el-upload
+      v-loading.fullscreen.lock="mark"
+      ref="upload"
+      :action="newUrl"
+      :headers="myHeaders"
+      list-type="picture-card"
+      :multiple="true"
+      :auto-upload="false"
+      :limit="limit"
+      :file-list="imgList"
+      :on-success="handleAvatarSuccess"
+      :on-error="handleError"
+      :on-progress="onProgress"
+      :disabled="limit <= value.length"
+    >
+      <i slot="default" class="el-icon-plus" />
+      <div slot="file" slot-scope="{ file }">
+        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+        <span class="el-upload-list__item-actions">
+          <span
+            class="el-upload-list__item-preview"
+            @click="handlePictureCardPreview(file)"
+          >
+            <i class="el-icon-zoom-in" />
+          </span>
+          <!-- <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleDownload(file)"
+          >
+            <i class="el-icon-download" />
+          </span> -->
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleRemove(file)"
+          >
+            <i class="el-icon-delete" />
+          </span>
+        </span>
+      </div>
+    </el-upload>
+      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
+
+    <el-dialog :visible.sync="dialogVisible" :modal="false">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+    <!-- <el-button type="primary" >
+      指令方式
+    </el-button> -->
+  </div>
+</template>
+
+<script>
+import { UPLOAD_URL } from '@/const/urlKey';
+import { getToken } from '@/utils/auth';
+
+export default {
+  name: 'Upload',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    limit: {
+      type: Number,
+      default: 1
+    },
+    params: {
+      type: String,
+      default: ''
+    },
+    uploadUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      mark: false,
+      url: UPLOAD_URL,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false,
+      myHeaders: {
+        authorization: 'Bearer swagger-ui',
+        token: getToken()
+      },
+      imgList: this.value,
+      tmp: []
+    };
+  },
+
+  computed: {
+    newUrl() {
+      const params = this.params;
+      const url = this.uploadUrl;
+      let baseUrl = UPLOAD_URL;
+      if (url !== '') {
+        baseUrl = url;
+      }
+      if (params === '') {
+        return baseUrl;
+      } else {
+        return baseUrl + `?${params}`;
+      }
+    }
+  },
+
+  watch: {
+    value: {
+      handler(val) {
+        // if (this.imgList.length < val.length) {
+        this.imgList = val;
+        console.log(this.imgList);
+        // }
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    submitUpload() {
+      this.$refs.upload.submit();
+    },
+    onProgress() {
+      // this.moduleark = true;
+    },
+    handleError() {
+      this.mark = false;
+      this.$error('上传失败，请稍后重试...');
+    },
+    handleAvatarSuccess(res, file, fileList) {
+      if (file.response.code !== 200) {
+        this.$refs.upload.clearFiles();
+        this.$message.error('上传失败，请稍后再试~');
+        this.$emit('input', []);
+        return false;
+      }
+      const result =
+        fileList.length > 0
+          ? fileList.map(x => ({
+              name: x.response ? x.response.data.filename : x.name,
+              url: x.response ? x.response.data.fullPath : x.url,
+              size: x.response ? x.response.data.size : x.size
+            }))
+          : [];
+      this.$nextTick(() => {
+        this.$emit('input', result);
+        this.mark = false;
+      });
+    },
+    // handleChange(file, fileList) {
+    //   if (file.response) {
+    //     // this.imgList = this.tmp
+    //   }
+    //   console.log(file)
+    //   console.log(fileList)
+    //   // const result = fileList.length > 0 ? fileList.map(x => ({
+    //   //   name: x.name,
+    //   //   url: x.response.data.path
+    //   //   // url: x.url
+    //   // })) : []
+    //   // this.imgList = result
+    //   // const result = this.tmp
+    //   // this.imgList = JSON.parse(JSON.stringify(this.tmp))
+    // },
+    handleRemove(file, fileList) {
+      const result = this.imgList.filter(x => x.name !== file.name);
+      this.$emit('input', result);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page-select {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 20px;
+}
+</style>

src/components/index.js

@@ -7,6 +7,7 @@ import BaseTooltip from './BaseTooltip.vue';
 import Breadcrumb from './Breadcrumb.vue';
 import DataSelect from './DataSelect.vue';
 import Hamburger from './Hamburger.vue';
+import MultUpload from './MultUpload.vue';
 import RichText from './RichText.vue';
 import SvgIcon from './SvgIcon.vue';
 import Upload from './Upload.vue';
@@ -19,6 +20,7 @@ Vue.component('BaseTooltip', BaseTooltip);
 Vue.component('Breadcrumb', Breadcrumb);
 Vue.component('DataSelect', DataSelect);
 Vue.component('Hamburger', Hamburger);
+Vue.component('MultUpload', MultUpload);
 Vue.component('RichText', RichText);
 Vue.component('SvgIcon', SvgIcon);
 Vue.component('Upload', Upload);

src/views/baseManagement/bannerManagement/modal/ItemModal.vue

@@ -95,7 +95,7 @@ export default {
             message: '请上传图片',
             trigger: 'change'
           }
-        ]
+        ],
         link: [{ required: true, message: '请输入链接地址', trigger: 'change' },{ validator: checkUrl, trigger: 'blur' }]
       },
 

src/views/photographerManagement/photoVerify/modal/ItemModal.vue

@@ -12,12 +12,18 @@
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-form-item label="图片" prop="urls">
-        <upload
+        <mult-upload
           v-model="form.urls"
           :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')"
           :limit="10"
           params="prefix="
         />
+        <upload
+          v-model="form.urls"
+          :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')"
+          :limit="10"
+          params="prefix="
+        />        
       </el-form-item>
       <el-form-item label="关联场景" prop="kindergartenId">
         <SceneSelect v-model="form.kindergartenId" />