上传优化

src/App.vue

@@ -158,7 +158,7 @@ body,
   padding: 16px 0;
   text-align: right;
 }
-.ivu-radio-group {
+.ivu-form-item .ivu-radio-group {
   display: flex;
   justify-content: flex-start;
 }

src/views/news/index.vue

@@ -78,34 +78,40 @@
           </RadioGroup>
         </FormItem>
         <FormItem label="封面" prop="newspic">
-          <Upload
-            :format="pictureFormat"
-            :max-size="10 * 1024"
-            action
-            :before-upload="
-              (file) => {
-                beforeUploadPicture(file, addForm);
-                return false;
-              }
-            "
-            :accept="getPictureAccept()"
-            :show-upload-list="false"
-          >
-            <img
-              style="width: 200px"
-              v-if="addForm.newspic"
-              :src="$api.showImageUrl + addForm.newspic"
-            />
-            <!-- <Button v-else icon="ios-cloud-upload-outline">上传封面</Button> -->
-            <div class="upload_img" v-else>
-              <Icon
-                type="ivu-icon ivu-icon- iconfont icon-shangchuan"
-                size="42"
-                color="#e6e6e6"
+          <div class="form_item_upload">
+            <Upload
+              :format="pictureFormat"
+              :max-size="10 * 1024"
+              action
+              :before-upload="
+                (file) => {
+                  beforeUploadPicture(file, addForm);
+                  return false;
+                }
+              "
+              :accept="getPictureAccept()"
+              :show-upload-list="false"
+            >
+              <img
+                style="width: 200px"
+                v-if="addForm.newspic"
+                :src="$api.showImageUrl + addForm.newspic"
               />
-              <p class="shangchuan_btn">上传图片</p>
+              <!-- <Button v-else icon="ios-cloud-upload-outline">上传封面</Button> -->
+              <div class="upload_img" v-else>
+                <Icon
+                  type="ivu-icon ivu-icon- iconfont icon-shangchuan"
+                  size="42"
+                  color="#e6e6e6"
+                />
+                <p class="shangchuan_btn">上传图片</p>
+              </div>
+            </Upload>
+            <div class="uptype">
+              <p>支持上传格式（10MB以内）:</p>
+              <p>jpg、jpeg、png、bmp、jfif、webp.</p>
             </div>
-          </Upload>
+          </div>
         </FormItem>
         <FormItem label="置顶" prop="newsup">
           <RadioGroup v-model="addForm.newsup">
@@ -161,34 +167,40 @@
         :model="modifyForm"
       >
         <FormItem label="封面" prop="newspic">
-          <Upload
-            :format="pictureFormat"
-            :max-size="10 * 1024"
-            action
-            :before-upload="
-              (file) => {
-                beforeUploadPicture(file, modifyForm);
-                return false;
-              }
-            "
-            :accept="getPictureAccept()"
-            :show-upload-list="false"
-          >
-            <img
-              style="width: 200px"
-              v-if="modifyForm.newspic"
-              :src="$api.showImageUrl + modifyForm.newspic"
-            />
-            <!-- <Button v-else icon="ios-cloud-upload-outline">上传封面</Button> -->
-            <div class="upload_img" v-else>
-              <Icon
-                type="ivu-icon ivu-icon- iconfont icon-shangchuan"
-                size="42"
-                color="#e6e6e6"
+          <div class="form_item_upload">
+            <Upload
+              :format="pictureFormat"
+              :max-size="10 * 1024"
+              action
+              :before-upload="
+                (file) => {
+                  beforeUploadPicture(file, modifyForm);
+                  return false;
+                }
+              "
+              :accept="getPictureAccept()"
+              :show-upload-list="false"
+            >
+              <img
+                style="width: 200px"
+                v-if="modifyForm.newspic"
+                :src="$api.showImageUrl + modifyForm.newspic"
               />
-              <p class="shangchuan_btn">上传图片</p>
+              <!-- <Button v-else icon="ios-cloud-upload-outline">上传封面</Button> -->
+              <div class="upload_img" v-else>
+                <Icon
+                  type="ivu-icon ivu-icon- iconfont icon-shangchuan"
+                  size="42"
+                  color="#e6e6e6"
+                />
+                <p class="shangchuan_btn">上传图片</p>
+              </div>
+            </Upload>
+            <div class="uptype">
+              <p>支持上传格式（10MB以内）:</p>
+              <p>jpg、jpeg、png、bmp、jfif、webp.</p>
             </div>
-          </Upload>
+          </div>
         </FormItem>
         <FormItem label="置顶" prop="newsup">
           <RadioGroup v-model="modifyForm.newsup">
@@ -616,6 +628,13 @@ export default {
   padding: 16px 0;
   text-align: right;
 }
+.form_item_upload {
+  display: flex;
+  justify-content: flex-start;
+  .uptype {
+    padding-left: 10px;
+  }
+}
 .upload_img {
   padding-top: 10px;
   width: 198px;