修改上传图片

src/components/duty/addDutyItem.vue

+<style>
+  .addDutyUpload .ItemImgDiv{
+    width:118px;
+    height:118px;
+    position: relative;
+    margin:0 10px 10px 0;
+    display:inline-block;
+  }
+  .addDutyUpload .avatar-uploader .el-upload {
+    border-radius: 6px;
+    cursor: pointer;
+    width:100%;
+    height:100%;
+    color:#8c939d;
+    position: relative;
+    overflow: hidden;
+  }
+  .addDutyMain{
+    display:inline-block;
+    width:118px;
+    height:118px;
+    font-size:70px;
+    border: 1px dashed #d9d9d9;
+    line-height:120px;
+  }
+</style>
 <template>
   <q-dialog v-model="persistent" content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
     <q-card style="width: 800px;max-width:800px;">
@@ -28,16 +54,31 @@
               @input="getDutyFrequencyBySchoolIds" emit-value map-options :rules="[val => !!val || '请选择校区']" />
           </div>
         </div>
-        <div class="row wrap" style="display:none;">
-          <div class="col-6">
-            <template v-if="msg.ItemImgList&&msg.ItemImgList.length>0" v-for="(item,index) in msg.ItemImgList">
-              <q-img :src="item" spinner-color="white" style="height: 140px; max-width: 150px" />
-            </template>
+        <div class="row wrap addDutyUpload">
+          <div class="col-12">
+            <div style="display:flex;flex-wrap: wrap;">
+              <div v-if="msg.ItemImgList&&msg.ItemImgList.length>0" v-for="(item,index) in msg.ItemImgList">
+                <div class="ItemImgDiv">
+                  <q-img :src="item" spinner-color="white" style="height: 100%;height:100%" />
+                  <q-btn size="7px" @click="deleteItemImg(index)" style="position:absolute;right:-5px;top:-5px;" round color="red" icon="iconfont icon-guanbi1" />
+                </div>
+              </div>
+              <el-upload
+                class="avatar-uploader addDutyMain"
+                action=""
+                :before-upload="uploadFile"
+                :show-file-list="false"
+                >
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </div>
+          </div>
+          <!-- <div class="col-6" style="margin-top:10px;">
             <q-uploader :style="{ backgroundImage: 'url(' + BasicImg + ')' }"
               style="width:auto;height:200px;background-repeat:no-repeat;background-size:cover;" flat hide-upload-btn
-              max-files="1" label="示例图片" accept=".jpg, image/*" :factory="uploadFile" auto-upload>
+              max-files="10" label="示例图片" multiple accept=".jpg, image/*" :factory="uploadFile" auto-upload>
             </q-uploader>
-          </div>
+          </div> -->
         </div>
       </q-card-section>
       <q-card-actions align="right" class="bg-white">
@@ -102,7 +143,7 @@
     },
     methods: {
       uploadFile(files) {
-        UploadSelfFile("course", files[0], res => {
+        UploadSelfFile("course", files, res => {
           if (res.Code == 1) {
             this.BgImg = res.FileUrl;
             this.msg.ItemImgList.push(res.FileUrl);
@@ -205,6 +246,7 @@
         getSchoolDropdown({}).then(res => {
           if (res.Code == 1) {
             this.schoolOptions = res.Data;
+            console.log(this.schoolOptions,'schoolOptions');
           }
         })
       },
@@ -216,6 +258,10 @@
           }
         })
       },
+      //删除图片
+      deleteItemImg(index){
+        this.msg.ItemImgList.splice(index,1);
+      }
     },
   }