feat: 图片预览

src/views/huiju/editReply.vue

@@ -53,14 +53,15 @@
                   :on-success="onUploadSuccess(reply)"
                   name="transferAccounts"
                   class="upload-demo"
-                  :show-file-list="false"
+                  :class="reply.pic_url ? 'has-upload' : ''"
+                  list-type="picture-card"
+                  :show-file-list="true"
+                  :on-remove="() => reply.pic_url = ''"
                   :accept="accepted"
-                  drag
                   :data="uploadData"
                   action="/filemanage/upload"
               >
-                <i class="el-icon-upload"></i>
-                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <i class="el-icon-plus"></i>
               </el-upload>
             </el-tab-pane>
             <el-tab-pane label="图文" name="3">
@@ -72,14 +73,15 @@
                   :on-success="onUploadSuccess(reply)"
                   name="transferAccounts"
                   class="upload-demo"
-                  :show-file-list="false"
+                  :class="reply.pic_url ? 'has-upload' : ''"
+                  list-type="picture-card"
+                  :show-file-list="true"
+                  :on-remove="() => reply.pic_url = ''"
                   :accept="accepted"
-                  drag
                   :data="uploadData"
                   action="/filemanage/upload"
               >
-                <i class="el-icon-upload"></i>
-                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <i class="el-icon-plus"></i>
               </el-upload>
             </el-tab-pane>
           </el-tabs>
@@ -228,6 +230,11 @@ export default {
 
 <style lang="scss" scoped>
 .editReply {
+  ::v-deep {
+    .has-upload .el-upload {
+      display: none;
+    }
+  }
   .action-button {
     font-size: 16px;
     margin-left: 12px;