发布文章（五）-封面组件-上传图片功能-upload组件-用户头像上传模式-上传图片请求头 & 确认图片-逻辑--message消息提示组件-基本用法样式和默认图片丢失处理

07-发布文章-封面组件-上传图片功能

upload组件-用户头像上传模式：
https://element.eleme.cn/#/zh-CN/component/upload

src/components/my-image.vue中的div里-上传图片占位

<!-- 上传组件 -->
          <el-upload
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            :headers="headers"
            name="image"
            :show-file-list="false"
            :on-success="handleSuccess">
            <img v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

数据：src/components/my-image.vue中的data里

// 上传图片请求头
      headers: {
        Authorization: 'Bearer ' + store.getUser().token
      },
      // 上传成功后的预览图地址
      uploadImageUrl: null

函数：src/components/my-image.vue中的methods里

message消息提示组件-基本用法样式：
https://element.eleme.cn/#/zh-CN/component/message

 // 上传图片成功
    handleSuccess (res) {
      this.$message.success('上传图片成功')
      // 预览
      this.uploadImageUrl = res.data.url
    },

补充：再次打开对话框的时候，重置数据。

src/components/my-image.vue中的methods里

openDialog () {
      this.dialogVisible = true
      // 清除之前对话框的操作数据
      this.activeName = 'image'
      this.selectedImageUrl = null
      this.uploadImageUrl = null
      // 获取素材列表数据
      this.getImages()
    },

08-发布文章-封面组件-确认图片

• 点击确认按钮：
  • 如果当前选中的是素材库，校验 selectedImageUrl是否有数据
  • 如果当前选中的是上传图片，校验 uploadImageUrl是否有数据
  • 如果没有：提示
  • 如果有：使用对应的图片地址即可 关闭对话框。

src/components/my-image.vue中的div里的弹框确认按钮

<el-button type="primary" @click="confirmImage">确 定</el-button>

src/components/my-image.vue中的data里

// 第二步  确认后的图片按钮地址
confirmSrc: '../assets/images/default.png'

src/components/my-image.vue中的methods里

 // 确认图片
    confirmImage () {
      // 校验是否  选中   上传图片  数据
      // 判断的是 用户选中的tab是谁？
      let url = null
      if (this.activeName === 'image') {
        if (!this.selectedImageUrl) return this.$message.info('请选中一张图片')
        url = this.selectedImageUrl
      } else {
        if (!this.uploadImageUrl) return this.$message.info('请上传一张图片')
        url = this.uploadImageUrl
      }
      // 第三步  给图片按钮的src赋值  看到你选择的封面图片
      this.confirmSrc = url
      this.dialogVisible = false   //关闭对话框
    },

src/components/my-image.vue中的div里-按钮图片的地址进行动态绑定

//第一步
<img :src="confirmSrc" alt />

问题：默认图丢失了。

• 原来的地址写在：img标签上
  • 不用渲染
• 现在的地址写在：数据中
  • 渲染后才在你的标签中

导致：基于vue-cli 3.0的项目，基于webpack搭建，是一个打包工具，把项目依赖的所有资源，合并到一起（目录下）。

依赖的所有静态资源（import src url href）依赖资源都会打包。渲染后的地址不会打包。

结论：图片没有打包在你运行的项目中。

方案：自己主动的去导入图片数据即可

src/components/my-image.vue中导入

import defaultImage from '../assets/images/default.png'

src/components/my-image.vue中的data里

// 确认后的图片按钮地址
confirmSrc: defaultImage