本地上传

src/project/saas/AppCooperationPropaganda/addPropaganda.vue

@@ -25,13 +25,23 @@
         <u-input v-model="content" type="textarea" height="372" :auto-height="true" placeholder="请输入政策、活动、节日问候等内容" maxlength="1300"/>
       </div>
       <div class="content_fodder">
-        <!-- <div style="color: #8E8F91;">添加素材</div> -->
+        <div style="color: #8E8F91;">添加素材</div>
         <div class="fodder_alls">
-          <!-- <div class="fodder_add" @click="showUpload = true"><u-icon name="plus" color="#CCD0D3" size="32"></u-icon></div> -->
-          <AiUploader :def.sync="files" placeholder="添加素材" type="file" :limit="9" multiple action="/admin/file/add2"></AiUploader>
+          <div class="fodder_add" @click="showUpload = true"><u-icon name="plus" color="#CCD0D3" size="32"></u-icon></div>
+          <!-- <AiUploader :def.sync="files" placeholder="添加素材" type="file" :limit="9" multiple action="/admin/file/add2"></AiUploader> -->
         </div>
-        <div class="fodder_file">
-          <div class="item"></div>
+        <div class="fodder_file" v-for="(item, index) in files" :key="index">
+          <div class="item">
+            <div class="images">
+              <img src="	https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
+            </div>
+            <div class="info">
+              <div class="name">{{ item.name }}</div>
+              <div class="">{{ item.fileSizeStr }}</div>
+            </div>
+            <!-- <div class="reUpload" @click="handleReUpload(index)">重新上传</div> -->
+            <div class="remove" @click="remove" style="color: #f72c27">删除</div>
+          </div>
         </div>
       </div>
     </div>
@@ -290,6 +300,15 @@ export default {
       })
     },
 
+    // handleReUpload(i) {
+    //   this.showUpload = true
+    //   this.remove(i)
+    // },
+
+    remove(index) {
+      this.files.splice(index, 1)
+    },
+
     choiceTime(e) {
       this.form.choiceTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
     },
@@ -434,8 +453,38 @@ export default {
       }
 
       .fodder_file {
+        margin-top: 16px;
+        width: 100%;
         .item {
-          
+          display: flex;
+          .images {
+            margin-right: 32px;
+            img {
+              width: 80px;
+              height: 80px;
+            }
+          }
+          .info {
+            width: calc(100% - 200px);
+            .name {
+              overflow: hidden; 
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 2;
+            }
+            .size {
+              color: #9b9b9b;
+            }
+          }
+          .reUpload {
+            color:  #1365DD;
+            margin-left: 20px;
+          }
+          .remove {
+            color: #f72c27;
+            margin-left: 20px;
+          }
         }
       }
       
@@ -607,10 +656,6 @@ export default {
             width: 84px;
             height: 84px;
           }
-          span {
-            // display: inline-block;
-            // line-height: 44px;
-          }
         }
       }
     }