企业管理-添加-编辑企业的多图片上传

src/views/company/creatCompany.vue

@@ -43,12 +43,34 @@
             <el-input v-model="form.source_url" autocomplete="off" placeholder="请输入来源链接"></el-input>
           </el-form-item>
           <div>
-            <el-form-item label="缩略图：" class="custom-align-right" prop="">
-              <div class="uploaderBox" @mouseenter="hovering = true" mouseleave="hovering = false">
-                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                  :before-upload="beforeAvatarUpload">
+            <el-form-item label="缩略图：" class="custom-align-right" prop="imgurl">
+              <div class="uploaderBox">
+                <span v-if="imgurl.length > 0" class="uploaded-images">
+                <div v-for="(url, index) in imgurl" :key="index"
+                  style="display: inline;float: left; width: 150px; height:140px;">
+                  <img :src="url" class="avatar" style="float: left; margin-right: 10px;">
+                  <div style="position: relative;
+                    transform: translate(-50%, -50%);
+                    right: -120px;
+                    top: -20px;
+                    background-color: rgba(0, 0, 0, 0.5);
+                    color: white;
+                    border-radius: 50%;
+                    width: 24px;
+                    height: 24px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    z-index: 10;" @click="deleteImage(index)">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
+              </span>
+                <el-upload v-if="imgurl.length < 5"  class="avatar-uploader" action="#" :show-file-list="true"
+                  :before-upload="beforeAvatarUpload" >
                   <!-- 预览图片 -->
-                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <img v-if="imgurl.length > 5" :src="imgUrl" class="avatar">
                   <div v-else class="chooseImgDiv">
                     <div>
                       <img src="@/assets/public/upload/noImage.png">
@@ -56,13 +78,16 @@
                     </div>
                   </div>
                 </el-upload>
-                <input type="hidden" v-model="form.imgurl">
-                <span class="photo_tips">推荐图片长宽比例为 16:9，大小不能超过 500 K。</span>
                 <div v-if="hovering && imgUrl" class="delete-button" @click="handleDelete">
                   <i class="el-icon-delete"></i>
                 </div>
               </div>
+             
             </el-form-item>
+             <p class="photo_tips" style="margin-left: 140px;"> 最多可上传5张，每张图片大小不能超过500K，推荐上传图片尺寸
+
+              宽1000像素 高1000像素。(首张显示为项目头图)
+            </p>
             <el-form-item label="内容简介：" prop="description" class="custom-align-right">
               <el-input v-model="form.description" autocomplete="off" placeholder="请输入内容简介" type="textarea" :rows="3"></el-input>
             </el-form-item>
@@ -175,13 +200,6 @@
               <el-form-item label="企业内容：" prop="content" class="custom-align-right">
                 <myEditor ref="myEditor" v-model="form.content"></myEditor>
               </el-form-item>
-              <el-form-item label="" prop="commend_id" class="custom-align-right">
-                <draggable v-model="form.commend_id" @end="onDragEnd">
-                  <el-tag :key="item.id" v-for="item in form.commend_id" closable :disable-transitions="false"
-                    @close="handleClose(item)"> {{ item }}
-                  </el-tag>
-                </draggable>
-              </el-form-item>
             </div>
           </div>
         </div>
@@ -283,7 +301,7 @@ export default {
         author: "",//作者
         source: "",//来源名称
         source_url: "",//来源地址
-        imgurl: "",//缩略图
+        imgurl: [],//缩略图
         introduce: "",//描述
         keyword: "",//关键词
         description: "",//简介
@@ -330,10 +348,13 @@ export default {
         city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
         //内容不能为空
         content: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        //企业性质
+        imgurl: [{ required: true, trigger: 'blur', validator: validateArray }],
       },
 
       //1.4图片上传
-      imgUrl: "",//在页面上显示缩略图
+      imgUrl: [],//在页面上显示缩略图
+      imgurl:[],
       //获取父级导航池
       parentKey: 0,//获取父级导航
       parentData: {
@@ -452,24 +473,32 @@ export default {
         this.$message.error('上传缩略图大小不能超过 2MB!');
         return false;
       }
-
+      // ---------------多图上传---处理
+      if (this.imgurl.length > 4) {
+        this.$message.warning('只能上传5张图片');
+        return false;
+      }
+      // ---------------多图上传---处理
       const formData = new FormData();
       formData.append('file', file);
 
       this.$store.dispatch('pool/uploadFile', formData).then(res => {
-        this.imgUrl = res.data.imgUrl;//显示缩略图
-        this.form.imgurl = res.data.imgUrl;//提供表单地址
-        console.log(res.data.imgUrl)
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
+         // ---------------多图上传---处理
+        this.imgurl.push(res.data.imgUrl);//显示缩略图
+        this.form.imgurl.push(res.data.imgUrl);//提供表单地址
+        console.log(res.data.imgUrl, '00000')
+        // this.imgUrl = res.data.imgUrl;//显示缩略图
+        // this.form.imgurl = res.data.imgUrl;//提供表单地址
+        // console.log(res.data.imgUrl)
+         // ---------------多图上传---处理
       })
 
       // 阻止默认的上传行为
       return false;
     },
+    deleteImage(index) { // 删除图片
+      this.imgurl.splice(index, 1);
+    },
     //1.2 提交表单
     addToServe() {
       
@@ -526,11 +555,11 @@ export default {
           const formData = { ...this.form };
           formData.city_arr_id = Array.isArray(this.form.city_arr_id) ? JSON.stringify(this.form.city_arr_id):  this.form.city_arr_id ;
           console.log("formData==", typeof(this.form.city_arr_id));
-          
+          formData.imgurl =  Array.isArray(this.form.imgurl) ? JSON.stringify(this.form.imgurl):  this.form.imgurl ;
+          this.form.cat_arr_id =  Array.isArray(this.form.cat_arr_id) ? JSON.stringify(this.form.cat_arr_id):  this.form.cat_arr_id ;
           delete formData.commend_id;
           delete formData.nav_add_pool_id;
           delete formData.user_type;
-          console.log("formData==格式化后的日期", formData);
           // delete formData.data;
           this.$store.dispatch('company/addCompany', formData).then(res => {
             if (res.code == 200) {
@@ -579,7 +608,7 @@ export default {
         this.form.author = "";
         this.form.source = "";
         this.form.source_url = "";
-        this.form.imgurl = "";
+        this.form.imgurl = [];
         this.form.introduce = "";
         this.form.keyword = "";
         this.form.description = "";
@@ -618,8 +647,8 @@ export default {
     //1.5 删除图片
     handleDelete() {
       // 删除图片
-      this.imgUrl = ''; // 清空图片 URL
-      this.form.imgurl = ''; // 清空表单中的图片 URL
+      this.imgUrl = []; // 清空图片 URL
+      this.form.imgurl = []; // 清空表单中的图片 URL
     },
     //提交表单 end ------------------------------------------------------------>
 
@@ -652,7 +681,8 @@ export default {
         }
         this.created_at = res.data.created_at;
         this.form.cat_arr_id = Array.isArray(res.data.cat_arr_id) ? res.data.cat_arr_id : JSON.parse(res.data.cat_arr_id);
-        console.log(this.form.cat_arr_id)
+        this.form.imgurl = Array.isArray(res.data.imgurl) ? res.data.imgurl : JSON.parse(res.data.imgurl);
+        console.log("回显图片",this.form.imgurl)
         //回显导航池 连同非管理员得一起刷新
         this.parentKey += 1; // 触发级联选择器重新加载
         this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
@@ -662,8 +692,8 @@ export default {
         this.form.city_arr_id = JSON.parse(res.data.city_arr_id);
 
         //回显其他数据
-        this.form.imgurl = res.data.imgurl;
-        this.imgUrl = res.data.imgurl;
+        // this.form.imgurl = res.data.imgurl;
+        this.imgurl = Array.isArray(res.data.imgurl) ? res.data.imgurl : JSON.parse(res.data.imgurl);
         this.form.keyword = res.data.keyword;
         this.tags = res.data.keyword ? res.data.keyword.split(",") : '';
         this.form.description = res.data.description;
@@ -778,7 +808,7 @@ export default {
           const formData = { ...this.form };
           // console.log("this.form222==", this.form);
           formData.city_arr_id = Array.isArray(this.form.city_arr_id) ? JSON.stringify(this.form.city_arr_id):  this.form.city_arr_id ;
-          
+          formData.imgurl =  Array.isArray(this.form.imgurl) ? JSON.stringify(this.form.imgurl):  this.form.imgurl ;
           delete formData.commend_id;
           delete formData.nav_add_pool_id;
           delete formData.user_type;