feat: #批量上传

src/api/photoWarehouse/index.js

@@ -12,3 +12,6 @@ export const auditItem = params =>
 	api.post(`/yxl-back-end/admin/photo-warehouse/audit`, params);
 export const updateItem = ({ id, ...params }) =>
 	api.put(`/yxl-back-end/admin/photo-warehouse/${id}`, params);
+
+export const multUpload = params =>
+	api.postData(`/yxl-back-end/admin/photo-warehouse/multupload`, params);

src/components/MultUpload.vue

@@ -3,16 +3,13 @@
     <el-upload
       v-loading.fullscreen.lock="mark"
       ref="upload"
-      :action="newUrl"
+      action=""
       :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"
+      :on-change="handleChange"
       :disabled="limit <= value.length"
     >
       <i slot="default" class="el-icon-plus" />
@@ -25,31 +22,21 @@
           >
             <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-button
+      class="mt-40"
+      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>
 
@@ -72,9 +59,13 @@ export default {
       type: String,
       default: ''
     },
-    uploadUrl: {
-      type: String,
-      default: ''
+    paramsData: {
+      type: Object,
+      default: () => ({})
+    },
+    api: {
+      type: Function,
+      default: () => {}
     }
   },
   data() {
@@ -88,7 +79,7 @@ export default {
         authorization: 'Bearer swagger-ui',
         token: getToken()
       },
-      imgList: this.value,
+      imgList: [],
       tmp: []
     };
   },
@@ -109,67 +100,48 @@ export default {
     }
   },
 
-  watch: {
-    value: {
-      handler(val) {
-        // if (this.imgList.length < val.length) {
-        this.imgList = val;
-        console.log(this.imgList);
-        // }
-      },
-      immediate: true
-    }
-  },
+  // 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();
+    handleChange(fileList) {
+      this.imgList.push(fileList);
     },
-    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;
+    submitUpload() {
+      this.mark = true;
+      let form = new FormData();
+      for (let key in this.paramsData) {
+        form.append(key, this.paramsData[key]);
       }
-      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;
+      console.log(this.imgList);
+      this.imgList.forEach(file => {
+        form.append('file', file.raw);
       });
-    },
-    // 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);
+      // this.mark = false;
+      this.api(form)
+        .then(({ success }) => {
+          if (success) {
+            this.mark = false;
+            this.$emit('finish');
+          } else {
+            this.$error('上传失败，请稍后重试...');
+            this.mark = false;
+          }
+        })
+        .catch(err => {
+          console.error(err);
+          this.$error('上传失败，请稍后重试...');
+          this.mark = false;
+        });
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;

src/utils/dialog-helper.js

@@ -15,6 +15,7 @@ import ActivityItem from 'views/photoManagement/eventsList/modal/ItemModal.vue';
 import PhotoVerifyItem from 'views/photoManagement/photoVerifyManagement/modal/ItemModal.vue';
 import ImageGoodsItem from 'views/photoManagement/imageGoodsManagement/modal/ItemModal.vue';
 import PhotoUpload from 'views/photographerManagement/photoVerify/modal/ItemModal.vue';
+import PhotoMultUpload from 'views/photographerManagement/photoVerify/modal/MultItemModal.vue';
 
 const modal = (Component, props) => {
   let _component = null;
@@ -37,6 +38,13 @@ const modal = (Component, props) => {
   document.body.appendChild(_component.$el);
 };
 
+let PhotoMultUploadModal = data => {
+  modal(PhotoMultUpload, data);
+};
+Vue.prototype.$PhotoMultUploadModal = params => {
+  PhotoMultUploadModal(params);
+};
+
 let AdvanceViewImageModal = data => {
   modal(AdvanceViewImage, data);
 };

src/utils/request.js

@@ -322,6 +322,19 @@ const post = (url, data = {}, config) => {
   );
 };
 
+const postData = (url, data = {}, config) => {
+  config = pretreatConfig(config);
+  config = Object.assign(
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data; charset=UTF-8'
+      }
+    },
+    config
+  );
+  return formatResponse(axios.post(url, data, config));
+};
+
 const put = (url, data = {}, config) => {
   config = pretreatConfig(config);
   config = Object.assign(
@@ -354,6 +367,7 @@ const put = (url, data = {}, config) => {
 export default {
   get,
   post,
+  postData,
   del,
   put,
   delData

src/views/photographerManagement/photoVerify/index.vue

@@ -6,6 +6,13 @@
       <el-button type="primary" icon="el-icon-plus" @click="$PhotoUploadModal()"
         >新增</el-button
       >
+      <el-button
+        type="primary"
+        icon="el-icon-plus"
+        @click="$PhotoMultUploadModal()"
+        >批量新增</el-button
+      >
+
       <base-table
         :columns="columns"
         :items="items"
@@ -47,7 +54,7 @@ export default {
               }`
             )
         },
-        
+
         {
           key: 'listPreview',
           name: '列表缩略图',

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

@@ -0,0 +1,113 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="modal"
+    width="500px"
+    :close-on-click-modal="false"
+    @close="
+      res => {
+        $emit('cancel');
+      }
+    "
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-steps class="mrow-40 pb-40" :space="200" :active="step">
+        <el-step title="关联信息"></el-step>
+        <el-step title="批量上传"></el-step>
+      </el-steps>
+
+      <div v-if="step === 0">
+        <el-form-item label="关联场景" prop="kindergartenId">
+          <SceneSelect v-model="form.kindergartenId" />
+        </el-form-item>
+        <el-form-item label="关联活动" prop="activityId">
+          <ActivitySelect
+            v-model="form.activityId"
+            :kindergartenId="form.kindergartenId"
+            :firstLoad="false"
+            :disabled="form.kindergartenId === null"
+          />
+        </el-form-item>
+      </div>
+      <el-form-item v-show="step === 1" label="图片" prop="urls" required>
+        <mult-upload
+          v-model="form.urls"
+          :api="multUpload"
+          :limit="999"
+          :paramsData="uploadParams"
+          @finish="handleFinish"
+        />
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { saveItem, multUpload } from '@/api/photoWarehouse';
+
+export default {
+  name: 'PhotoUploadModal',
+
+  data() {
+    return {
+      title: '上传图片',
+      modal: true,
+
+      multUpload: multUpload,
+
+      // step: 0,
+
+      form: {
+        urls: [],
+        kindergartenId: '',
+        activityId: ''
+      },
+      rules: {
+        urls: [{ required: true, message: '请上传图片', trigger: 'change' }],
+        kindergartenId: [
+          { required: true, message: '请选择关联场景', trigger: 'blur' }
+        ],
+        activityId: [
+          { required: true, message: '请选择关联活动', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+
+  computed: {
+    step() {
+      const { kindergartenId, activityId } = this.form;
+      let result = 1;
+      if (!kindergartenId || !activityId) {
+        result = 0;
+      }
+      return result;
+    },
+    uploadParams() {
+      const { kindergartenId, activityId } = this.form;
+      return { kindergartenId, activityId };
+    }
+  },
+
+  watch: {
+    'form.kindergartenId': {
+      handler(val) {
+        this.form.activityId = '';
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {},
+
+  methods: {
+    handleFinish() {
+      this.$success('保存成功！');
+      this.modal = false;
+      this.$g_emit('photo_reload');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>