批量上传图片

src/api/system/family/album.js

@@ -50,4 +50,4 @@ export function exportAlbum(query) {
     method: 'get',
     params: query
   })
-}
+}

src/api/system/family/photo.js

@@ -50,4 +50,14 @@ export function exportPhoto(query) {
     method: 'get',
     params: query
   })
+}
+
+
+export function batchUpload(id,data){
+  return request({
+    headers:["Content-Type","multipart/form-data; boundary="],
+    url: '/system/family/photo/batchUpload/'+ id,
+    method: 'post',
+    data: data
+  })
 }

src/views/system/family/album/index.vue

@@ -128,8 +128,8 @@
             class="lsw_square"
             :fit="'contain'"
             style="max-width: 80px; border-radius: 20%"
-            :src="scope.row.url"
-            :preview-src-list="[scope.row.url]"
+            :src="baseUrl+scope.row.url"
+            :preview-src-list="[baseUrl+scope.row.url]"
           >
             <div slot="error" class="image-slot">
               <i class="el-icon-picture-outline"></i>
@@ -226,8 +226,8 @@
               margin-top: 10px;
               border-radius: 20%;
             "
-            :src="form.url"
-            :preview-src-list="[form.url]"
+            :src="baseUrl+form.url"
+            :preview-src-list="[baseUrl+form.url]"
           ></el-image>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -331,12 +331,14 @@ export default {
       fixedNumber: [1, 1],
       showImg: false,
       modName: "family",
+      baseUrl:undefined,
     };
   },
   activated() {
     this.init();
   },
   mounted() {
+    this.baseUrl = process.env.VUE_APP_BASE_API;
     this.init();
     this.getDicts("sys_show_hide").then((response) => {
       this.statusOptions = response.data;

src/views/system/family/photo/index.vue

@@ -76,6 +76,16 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
+          type="warning"
+          icon="el-icon-plus"
+          size="mini"
+          @click="batchUploadHandle"
+          v-hasPermi="['system:familyPhoto:upload']"
+          >批量上传</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
           type="success"
           icon="el-icon-edit"
           size="mini"
@@ -127,8 +137,8 @@
             class="lsw_square"
             :fit="'contain'"
             style="max-width: 80px; border-radius: 20%"
-            :src="scope.row.url"
-            :preview-src-list="[scope.row.url]"
+            :src="baseUrl + scope.row.url"
+            :preview-src-list="[baseUrl + scope.row.url]"
           >
             <div slot="error" class="image-slot">
               <i class="el-icon-picture-outline"></i>
@@ -202,7 +212,7 @@
             :show-file-list="false"
             :before-upload="beforeAvatarUpload"
           >
-            <img v-if="form.url" :src="form.url" class="avatar" />
+            <img v-if="form.url" :src="baseUrl + form.url" class="avatar" />
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
@@ -235,6 +245,39 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 批量上传对话框 -->
+    <el-dialog
+      title="批量上传图片"
+      :visible.sync="openBatch"
+      width="800px"
+      append-to-body
+    >
+      <el-upload
+        action="#"
+        list-type="picture-card"
+        :multiple="true"
+        ref="batchUploadRef"
+        :auto-upload="false"
+      >
+        <i slot="default" class="el-icon-plus"></i>
+        <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-delete"
+              @click="handleRemove(file)"
+            >
+              <i class="el-icon-delete"></i>
+            </span>
+          </span>
+        </div>
+      </el-upload>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitBatchUpload">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -246,6 +289,7 @@ import {
   addPhoto,
   updatePhoto,
   exportPhoto,
+  batchUpload
 } from "@/api/system/family/photo";
 import { uploadFile } from "@/api/common/common";
 import { listAlbum, getAlbum } from "@/api/system/family/album";
@@ -281,40 +325,42 @@ export default {
         albumId: null,
         title: null,
         url: null,
-        status: null,
+        status: null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         familyId: [
-          { required: true, message: "家族不能为空", trigger: "change" },
+          { required: true, message: "家族不能为空", trigger: "change" }
         ],
         albumId: [
-          { required: true, message: "相簿不能为空", trigger: "change" },
+          { required: true, message: "相簿不能为空", trigger: "change" }
         ],
         title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
-        url: [{ required: true, message: "url不能为空", trigger: "blur" }],
+        url: [{ required: true, message: "url不能为空", trigger: "blur" }]
       },
       familyId: undefined,
       family: undefined,
       albumId: undefined,
       album: undefined,
+      baseUrl: undefined,
+      openBatch: false
     };
   },
   activated() {
     this.init();
   },
   mounted() {
+    this.baseUrl = process.env.VUE_APP_BASE_API;
     this.init();
-    this.getDicts("sys_show_hide").then((response) => {
+    this.getDicts("sys_show_hide").then(response => {
       this.statusOptions = response.data;
     });
     //this.getFamilyOptions();
   },
   methods: {
     init() {
-      
       this.familyId = this.$route.query.fid;
 
       this.albumId = this.$route.query.albid;
@@ -349,8 +395,7 @@ export default {
     // },
     /**获取单个相册信息 */
     getAlbumById(_albumId) {
-      getAlbum(_albumId).then((res) => {
-       
+      getAlbum(_albumId).then(res => {
         this.album = res.data;
         this.family = this.album.family;
       });
@@ -359,7 +404,7 @@ export default {
     /** 查询家族相簿照片列表 */
     getList() {
       this.loading = true;
-      listPhoto(this.queryParams).then((response) => {
+      listPhoto(this.queryParams).then(response => {
         this.photoList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -372,6 +417,7 @@ export default {
     // 取消按钮
     cancel() {
       this.open = false;
+      this.openBatch = false;
       this.reset();
     },
     // 表单重置
@@ -388,7 +434,7 @@ export default {
         updateTime: null,
         remark: null,
         status: null,
-        delFlag: null,
+        delFlag: null
       };
       this.resetForm("form");
     },
@@ -404,7 +450,7 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id);
+      this.ids = selection.map(item => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
@@ -422,7 +468,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids;
-      getPhoto(id).then((response) => {
+      getPhoto(id).then(response => {
         this.form = response.data;
         this.open = true;
         this.title = "修改家族相簿照片";
@@ -430,10 +476,10 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate((valid) => {
+      this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            updatePhoto(this.form).then((response) => {
+            updatePhoto(this.form).then(response => {
               if (response.code === 200) {
                 this.msgSuccess("修改成功");
                 this.open = false;
@@ -441,7 +487,7 @@ export default {
               }
             });
           } else {
-            addPhoto(this.form).then((response) => {
+            addPhoto(this.form).then(response => {
               if (response.code === 200) {
                 this.msgSuccess("新增成功");
                 this.open = false;
@@ -461,17 +507,17 @@ export default {
         {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
-          type: "warning",
+          type: "warning"
         }
       )
-        .then(function () {
+        .then(function() {
           return delPhoto(ids);
         })
         .then(() => {
           this.getList();
           this.msgSuccess("删除成功");
         })
-        .catch(function () {});
+        .catch(function() {});
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -479,15 +525,15 @@ export default {
       this.$confirm("是否确认导出所有家族相簿照片数据项?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning",
+        type: "warning"
       })
-        .then(function () {
+        .then(function() {
           return exportPhoto(queryParams);
         })
-        .then((response) => {
+        .then(response => {
           this.download(response.msg);
         })
-        .catch(function () {});
+        .catch(function() {});
     },
     //自定义上传
     requestUpload(data) {
@@ -502,7 +548,7 @@ export default {
         "modName",
         "family/" + this.family.code + "/" + this.albumId
       );
-      uploadFile(formData).then((response) => {
+      uploadFile(formData).then(response => {
         if (response.code === 200) {
           this.form.url = response.fileName;
         }
@@ -520,10 +566,52 @@ export default {
       }
       return !isJPG && isLt2M;
     },
-  },
+    batchUploadHandle() {
+      this.openBatch = true;
+    },
+    handleRemove(file) {
+      let refs = this.$refs.batchUploadRef;
+      refs.uploadFiles.forEach((item, index) => {
+        if (item.uid == file.uid) {
+          refs.uploadFiles.splice(index, 1);
+        }
+      });
+    },
+    //批量上传图片
+    submitBatchUpload() {
+      let uploading = this.$loading({
+        lock: true,
+        text: "正在上传中……",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+
+
+
+      let refs = this.$refs.batchUploadRef;
+
+      let formData = new FormData();
+
+      refs.uploadFiles.forEach((item, index) => {
+        formData.append("files", item.raw);
+      });
+      formData.append(
+        "modName",
+        "family/" + this.family.code + "/" + this.albumId
+      );
+      batchUpload(this.albumId, formData).then(response => {
+        if (response.code === 200) {
+
+          this.cancel();
+          this.handleQuery();
+        }
+        uploading.close();
+      });
+    }
+  }
 };
 </script>
-<style >
+<style>
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;