上传头像，等待继续封装

src/views/course/CourseAdd.vue

@@ -5,10 +5,7 @@
         <!-- 课程名称 -->
         <a-col :span="18" :offset="3">
           <a-form-model-item label="课程名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
-            <a-input
-              v-model="form.courseName"
-              v-decorator="['courseName', { rules: [{ required: true, message: '请填写课程名称' }] }]"
-            />
+            <a-input v-model="form.courseName" v-decorator="['courseName', { rules: [{ required: true, message: '请填写课程名称' }] }]" />
           </a-form-model-item>
         </a-col>
 
@@ -25,14 +22,7 @@
         <!-- 课时 -->
         <a-col :span="9">
           <a-form-item label="课时" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
-            <a-input-number
-              id="hour"
-              v-model="dataValue"
-              :min="1"
-              :max="1000"
-              @change="onChange"
-              :style="{ display: 'ln', width: '100%' }"
-            />
+            <a-input-number id="hour" v-model="dataValue" :min="1" :max="1000" @change="onChange" :style="{ display: 'ln', width: '100%' }" />
             {{ dataValue }}分钟
           </a-form-item>
         </a-col>
@@ -79,28 +69,32 @@
             <a-input v-model="form.remark" type="textarea" />
           </a-form-model-item>
         </a-col>
-        <a-button @click="save">保存</a-button>
 
         <!-- 上传封面图片 -->
-        <!-- <a-col :span="18" :offset="3">
+        <a-col :span="18" :offset="3">
           <a-form-model-item label="上传封面图片" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
-          <a-upload
-            name="avatar"
-            list-type="picture-card"
-            class="avatar-uploader"
-            :show-upload-list="false"
-            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-            :before-upload="beforeUpload"
-            @change="handleChange"
-          >
+            <a-upload action="/dawa/sys/oss/upload?sourceId=course" list-type="picture-card" :file-list="fileList" :headers="getToken()" @change="handleChange" @preview="handlePreview">
+              <div v-if="fileList.length < 1">
+                <a-icon type="plus" />
+                <div class="ant-upload-text">上传</div>
+              </div>
+            </a-upload>
+            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+              <img alt="example" style="width: 100%" :src="previewImage" />
+            </a-modal>
+
+            <!-- <a-upload name="file" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" action="" :headers="getToken()" :change="onSuccess">
               <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
               <div v-else>
                 <a-icon :type="loading ? 'loading' : 'plus'" />
                 <div class="ant-upload-text">封面图片</div>
               </div>
-          </a-upload>
+            </a-upload> -->
           </a-form-model-item>
-      </a-col> -->
+        </a-col>
+      </a-row>
+      <a-row :span="18" :offset="3">
+        <a-button @click="save">保存</a-button>
       </a-row>
     </a-form-model>
   </a-card>
@@ -109,7 +103,9 @@
 
 
 <script>
-import { courseAdd, getCourseDetails} from '@/api/course/course'
+import { courseAdd, getCourseDetails } from '@/api/course/course'
+import storage from 'store'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
 
 export default {
   name: 'step1',
@@ -122,6 +118,11 @@ export default {
         { id: '2', name: '人员类别2' },
         { id: '3', name: '人员类别3' },
       ],
+
+      previewVisible: false,
+      fileList: []
+
+
     }
   },
   components: {
@@ -129,14 +130,16 @@ export default {
     getCourseDetails
   },
   created() {
-    getCourseDetails({id: this.$route.query.id }).then(res => { 
+    if (this.$route.query.id) {
+      getCourseDetails({ id: this.$route.query.id }).then(res => {
         this.form = res.data;
 
-      this.form.courseType = this.form.courseType+'';
+        this.form.courseType = this.form.courseType + '';
         this.form.industryInvolved = this.form.industryInvolved + '';
         this.form.isRequired = this.form.isRequired + '';
 
       });
+    }
   },
   methods: {
     //获取字典值
@@ -160,6 +163,30 @@ export default {
         }
       })
     },
+
+    getToken() {
+      let hreader = {};
+      hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN);
+      return hreader;
+    },
+    onSuccess(file) {
+      console.log('1---', file);
+
+    },
+    handleCancel() {
+      this.previewVisible = false;
+    },
+    async handlePreview(file) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj);
+      }
+      this.previewImage = file.url || file.preview;
+      this.previewVisible = true;
+    },
+    handleChange({ fileList }) {
+      this.fileList = fileList;
+    },
+
   },
 }
 </script>