课程详情图片、课程编辑图片显示

src/views/course/CourseAdd.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false" title="课程新增">
+  <a-card :bordered="false" :title="pageName">
     <template slot="extra">
       <a-button type="primary" @click="goback">返回</a-button>
       <a-button type="primary" @click="save">保存</a-button>
@@ -83,7 +83,7 @@
         <!-- 上传封面图片 -->
         <a-col :span="18" :offset="3">
           <a-form-model-item label="上传封面图片" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
-            <db-upload v-model="fileList"></db-upload>
+            <db-upload v-model="fileList" :max="1"></db-upload>
           </a-form-model-item>
         </a-col>
 
@@ -116,6 +116,7 @@ export default {
   name: 'step1',
   data() {
     return {
+      pageName: this.$route.query.id ? '课程编辑' : '课程新增',
       dataValue: 1,
       form: {
         coverPath: '',
@@ -137,15 +138,24 @@ export default {
   components: {
     DbUpload,
     courseAdd,
-    getCourseDetails
+    getCourseDetails,
   },
   created() {
     this.dictionaryDropDown()
+    if(this.$route.query.id) this.loadData();
+  },
+
+  methods: {
+    //显示页面上的数字
+    onChange(dataValue) {},
+
+    //加载数据
+    loadData() {
       if (this.$route.query.id) {
         getCourseDetails({ id: this.$route.query.id }).then((res) => {
           this.form = res.data
           this.form.isRequired = this.form.isRequired + ''
-
+          this.fileList = JSON.parse(this.form.coverPath)
           this.form.tags = []
           this.form.courseTags.forEach((item, index) => {
             this.form.tags.push(item.dictValue.toString())
@@ -154,15 +164,13 @@ export default {
       }
     },
 
-  methods: {
-    //显示页面上的数字
-    onChange(dataValue) {},
     save() {
+      this.form.coverPath = JSON.stringify(this.fileList)
       courseAdd(this.form).then((res) => {
         if (res.code == 200) {
           this.$message.info('保存成功')
           //新增完成后直接返回课程列表
-          this.goback();
+          this.goback()
         }
       })
     },
@@ -194,7 +202,7 @@ export default {
 
     //返回
     goback() {
-      console.log('this.$route.query.type',this.$route.query.type);
+      console.log('this.$route.query.type', this.$route.query.type)
       this.$router.push({
         // /course/CourseList/sys
         path: '/course/CourseList/' + this.$route.query.type,
@@ -204,43 +212,10 @@ export default {
       })
     },
 
-    getToken() {
-      let hreader = {}
-      hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
-      return hreader
-    },
-    onSuccess(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
-      this.fileList.file = fileList[0]
-      this.form.coverPath = this.fileList.file.response.url
-    },
-
     //标签选择器
     handleTagChange(value) {
       this.form.tags = value
     },
   },
 }
-
-// 图片预览Base64
-function getBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.readAsDataURL(file)
-    reader.onload = () => resolve(reader.result)
-    reader.onerror = (error) => reject(error)
-  })
-}
 </script>

src/views/course/CourseDetail.vue

@@ -10,7 +10,7 @@
       <a-descriptions-item label="备注"> {{ detailData.remark }} </a-descriptions-item>
       <a-descriptions-item label="课程封面图">
         <div>
-          <img :src="detailData.coverPath">
+          <img style="width:75px;height:75px" :src="detailData.imagePath">
         </div>
       </a-descriptions-item>
       <a-descriptions-item label="标签">
@@ -35,6 +35,7 @@ export default {
     return {
       queryParam: { id: this.$route.query.id },
       detailData: {
+        imagePath: '', //图片路径
         coverPath:[],
       },
       dictCourseType: [],
@@ -43,16 +44,28 @@ export default {
     }
   },
   created: function () {
-    let parameter = {}
-    getCourseDetails(Object.assign(parameter, this.queryParam)).then((res) => {
-      this.detailData = res.data
-      console.log(this.detailData)
-    })
     //调用词典
+    this.loadData()
     this.dictionaryDropDown()
     this.getTagName()
   },
   methods: {
+    //加载数据
+    loadData() {
+      let parameter = {}
+      getCourseDetails(Object.assign(parameter, this.queryParam)).then((res) => {
+        this.detailData = res.data
+
+        this.detailData.coverPath = JSON.parse(res.data.coverPath)
+        console.log('JSON:::::',this.detailData.coverPath)
+
+        if(this.detailData.coverPath.length != 0) 
+          this.detailData.imagePath = this.detailData.coverPath[0].url;
+           console.log('url',this.detailData.imagePath)
+
+      })
+    },
+
     close() {
       this.$router.push({ path: '/course/CourseList/' + this.$route.query.type, query: {} })
     },