修改添加编辑项目、企业的前端多图上传的问题及bug修改

src/views/company/creatCompany.vue

@@ -498,6 +498,7 @@ export default {
     },
     deleteImage(index) { // 删除图片
       this.imgurl.splice(index, 1);
+      this.form.imgurl.splice(index, 1);
     },
     //1.2 提交表单
     addToServe() {

src/views/project/creatProject.vue

@@ -30,12 +30,34 @@
           </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">
@@ -43,8 +65,6 @@
                     </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>
@@ -195,14 +215,15 @@ export default {
       //提交表单
       creatNews_user_type: 0,//判断用户类型'
       created_at: "",//创建时间
-
+      imgurl: [],//缩略图
+      imgUrl:[],//显示缩略图
       form: {
         website_id: 0,//站点id
         cat_arr_id: [],//导航池名称
         category_id: 0,//栏目id
         nav_add_pool_id: [],//导航池子级
         title: '',//项目标题
-        imgurl: "",//缩略图
+        imgurl: [],//缩略图
         description: "",//描述
         keyword: "",//关键词
         content_person: "",//联系人
@@ -226,7 +247,7 @@ export default {
         //项目名称不能为空
         title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //如果使用了外链，外链地址不能为空
-        // city_arr_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        imgurl: [{ required: true, trigger: 'blur', validator: validateArray }],
         //导航池名称不能为空
         cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
         //行政区划
@@ -287,7 +308,6 @@ export default {
           }
           let parentId;
           if (self.ifwebsitId == true) {
-            console.log("网站选择已经改变！")
             parentId = 0;
             self.ifwebsitId = false;
             self.cat_arr_id = [];
@@ -322,7 +342,6 @@ export default {
 
   }, watch: {
     '$route'(to, from) {
-      console.log(from, '---------------------------------------');
       // 监听路由参数中的 id 变化，若变化则更新页面状态并获取数据
       if (to.query.id) {
         this.getMainData();
@@ -346,22 +365,29 @@ export default {
         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);//提供表单地址
+         // ---------------多图上传---处理
       })
 
+
       // 阻止默认的上传行为
       return false;
+    },
+     deleteImage(index) { // 删除图片
+      this.imgurl.splice(index, 1);
+      this.form.imgurl.splice(index, 1);
     },
     //1.2 提交表单
     addToServe() {
@@ -393,31 +419,24 @@ export default {
           // delete formData.cat_arr_id;
           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 ;
-          
+          formData.imgurl = Array.isArray(this.form.imgurl) ? JSON.stringify(this.form.imgurl):  this.form.imgurl ;
           if (this.form.cat_arr_id == "[]" || this.form.cat_arr_id == null) {
             this.form.cat_arr_id = '[]'
             this.form.category_id = 0;
-            // console.log("this.form.category_id11111", this.form.category_id);
           } else {
             if (JSON.parse(this.form.cat_arr_id.length == 0)) {
               this.form.category_id = 0;
-              //  console.log("this.form.category_id22222", this.form.category_id);
             } else {
               this.form.category_id = this.form.cat_arr_id[this.form.cat_arr_id.length - 1];
-              //  console.log("this.form.category_id133333", this.form.category_id);
             }
           }
           formData.category_id = this.form.category_id;
           formData.cat_arr_id = Array.isArray(this.form.cat_arr_id) ? JSON.stringify(this.form.cat_arr_id):  this.form.cat_arr_id ;
-          console.log("formData==", this.form.category_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('project/addProject', formData).then(res => {
             if (res.code == 200) {
-              console.log("项目发布成功！200")
               //汇报结果
               if (this.creatNews_user_type == 10000) {
                 this.$message({
@@ -480,13 +499,13 @@ export default {
     },
     //1.4更新详细地址
     update_city_arr_id(value) {
-      console.log("行政区划ID已更新:", value);
       this.form.city_arr_id = value;
     },
     //1.5 删除图片
     handleDelete() {
       // 删除图片
       this.imgUrl = ''; // 清空图片 URL
+      this.imgurl = '';
       this.form.imgurl = ''; // 清空表单中的图片 URL
     },
     //提交表单 end ------------------------------------------------------------>
@@ -512,7 +531,6 @@ export default {
         id: this.$route.query.id
       };
       this.$store.dispatch('project/getProjectInfo', data).then(res => {
-        console.log("回显数据==", res);
         this.form.title = res.data.title;
         if (typeof res.data.website_id === 'string') {
           this.form.website_id = Number(res.data.website_id);
@@ -520,7 +538,6 @@ export default {
           this.form.website_id = res.data.website_id//站点名称
         }
         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.parentKey += 1; // 触发级联选择器重新加载
         this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
@@ -530,8 +547,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 = Array.isArray(res.data.imgurl) ? res.data.imgurl : JSON.parse(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;
@@ -552,7 +569,6 @@ export default {
         this.form.fax = res.data.fax;
         this.form.email = res.data.email;
         this.form.address = res.data.address; 
-        console.log(this.inputList)
       })
     },
     async loadCascaderPath(path) {
@@ -608,21 +624,17 @@ export default {
             }
           }
           if (this.creatNews_user_type == 10000) {
-            console.log("用户身份为管理员,无需审核直接发布!")
             this.form.status = 1;
           } else {
-            console.log("用户身份为其他用户,提交到审核!")
             this.form.status = 0;
             this.form.website_id = this.websiteid;
           }
-          console.log("this.form111==", this.form);
           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.cat_arr_id = Array.isArray(this.form.cat_arr_id) ? JSON.stringify(this.form.cat_arr_id):  this.form.cat_arr_id ;
+          formData.imgurl = Array.isArray(this.form.imgurl) ? JSON.stringify(this.form.imgurl):  this.form.imgurl ;
           delete formData.user_type;
           delete formData.nav_add_pool_id;
-          // console.log("formData==", formData);
           this.$store.dispatch('project/upProject', formData).then(res => {
           if (res.code != 200) {
 
@@ -667,7 +679,6 @@ export default {
     get_creatNews_form_id_fun() {
       //判断用户类型ajax
       this.$store.dispatch('public/getInfo').then(res => {
-        //     console.log("res======",res)
         this.form.user_type = res.data.type_id;
       }).catch(() => {
         this.$message({
@@ -695,10 +706,8 @@ export default {
     creatNews_nav_pool_change_fun() {
       //开启导航池级联选择器
       this.ifwebsitId = true;
-      console.log(this.ifwebsitId);
       //  导航池级
       let that = this;
-      // console.log("website_id",this.form.website_id)
       this.form.website_id = this.form.website_id[0];
       that.parentKey_2 += 1;
       this.$store.dispatch('pool/get_creatNews_nav_son_actions', { type: 1, pid: String(this.creatNews_pid_num), website_id: String(this.form.website_id) }).then(res => {
@@ -726,8 +735,6 @@ export default {
       }else{
         this.form.keyword = JSON.stringify(newTags);
       }
-     
-      console.log(this.form.keyword);
     },
     //推荐等级多选获取到的数据
     levelChange(value) {
@@ -812,9 +819,7 @@ export default {
     //6.问卷 刘佳伟 end ------------------------------------------------------------>
   },
   mounted() {
-    console.log("mounted")
     this.getNews()
-    console.log(this.commend_article, '-------news-------');
     this.creatNews_user_type = getUseType()
     this.websiteid = getWebSiteId()
     //1.获得站点标识
@@ -825,12 +830,10 @@ export default {
       this.editId = this.$route.query.id;
       this.editStatus = true;
       // this.tableDivTitle = "编辑项目";
-      console.log("编辑项目！")
       this.getMainData();
     } else {
       this.editStatus = false;
       // this.tableDivTitle = "添加项目";
-      console.log("添加项目！")
     }
   },
 };