讲师头像上传前端实现

曾经终败给现在 2021-07-24 18:13 606阅读 0赞

# 一 前端上传组件参考 #

[https://element.eleme.cn/2.4/\#/zh-CN/component/upload][https_element.eleme.cn_2.4_zh-CN_component_upload]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 二 前端整合上传组件 #

## 1 定义页面组件模板 ##

src/views/teacher/form.vue

<el-form-item label="讲师简介">
            <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-error="handleAvatarError"
              :before-upload="beforeAvatarUpload"
              class="avatar-uploader"
              action="http://localhost:8120/admin/oss/file/upload?module=avatar">
              <img v-if="teacher.avatar" :src="teacher.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>

## 2 css参考官网 ##

## 3 定义页面组件脚本 ##

// 文件上传成功
        handleAvatarSuccess(response) {
          if (response.success) {
            this.teacher.avatar = response.data.url
            // 强制重新渲染
            this.$forceUpdate()
          } else {
            this.$message.error('服务器原因导致上传失败!')
          }
        },
    
    
        // 文件上传失败（http）
        handleAvatarError() {
          this.$message.error('网络原因导致文件上传失败!')
        },
    
    
        // 文件上传前的校验
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg' // MIME
          const isLt2M = file.size / 1024 / 1024 < 2
    
    
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
          }
          return isJPG && isLt2M
        }

# 三 测试 #

## 1 上传文件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

## 2 文件上传成功 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

[https_element.eleme.cn_2.4_zh-CN_component_upload]: https://element.eleme.cn/2.4/#/zh-CN/component/upload
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/caf2df7e037b4786bd187faff9ee0f7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/fe56b2760a0c4d26921c2bcf93593073.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/fe59c0cc055e4e8da8c91e34a03fbd40.png