前端整合上传组件

客官°小女子只卖身不卖艺 2021-07-24 11:00 376阅读 0赞

# 一 组件模板 #

在Info.vue中添加上传组件模板

<el-form-item label="课程封面">
            
            <el-upload
              :show-file-list="false"
              :on-success="handleCoverSuccess"
              :before-upload="beforeCoverUpload"
              :on-error="handleCoverError"
              class="cover-uploader"
              action="http://localhost:8120/admin/oss/file/upload?module=cover">
              <img v-if="courseInfo.cover" :src="courseInfo.cover">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>

css

# 二 回调函数 #

// 上传成功回调
        handleCoverSuccess(res, file) {
          if (res.success) {
            // console.log(res)
            this.courseInfo.cover = res.data.url
            // 强制重新渲染
            this.$forceUpdate()
          } else {
            this.$message.error('上传失败1（非20000）')
          }
        },
    
        // 上传校验
        beforeCoverUpload(file) {
          const isJPG = file.type === 'image/jpeg'
          const isLt2M = file.size / 1024 / 1024 < 2
    
    
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
          }
          return isJPG && isLt2M
        },
    
        // 错误处理
        handleCoverError() {
          console.log('error')
          this.$message.error('上传失败（http错误）')
        }

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/934edfeeebee41a1b326f07412354e85.png