开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

前言

在创建课程中需要上传课程封面，上传成功后还需要展示图片，具体效果如下

实现

基本结构

使用element-plus el-upload组件，传入一个el-button

  <div class="el-24">
    <span>课程封面</span>
    <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      list-type="picture"
      :limit="1"
    >
      <el-button type="primary">点击上传</el-button>
    </el-upload>
  </div>

fileList为数组,存有上传的图片的本地信息

const fileList = ref([]);

逻辑

在将来创建课程提交时，需要传入的图片为一个云端地址，我们获取的只是图片的本地信息，需要调用后端接口，返回一个云端地址

在el-upload的请求API中，可以直接将请求接口配置在action。同时还需要配置token，我这里后端使用的x-token，与后端相同即可

<el-upload
  v-model:file-list="fileList"
  class="upload-demo"
  action="http://xxxxxxxxxxxx"
  :headers="{
    'x-token': token,
  }"
  ···
>

// 获取token
const token = localStorage.getItem("token");

接着在上传前，需要判断用户上传文件格式是否错误，错误就发出警告.

befor-upload:上传文件之前的钩子，参数为上传的文件，若返回false或者返回 Promise 且被 reject，则停止上传。

<el-upload
  ···
  :before-upload="handleBeforeUpload"
  ···
>

// 检查上传是否为图片
const handleBeforeUpload = (file) => {
  const sufix = file.name.split(".")[1] || "";
  if (!["jpg", "jpeg", "png"].includes(sufix)) {
    ElMessage.error("文件格式错误");
    return false;
  }
};

如果检查无误，在on-success绑定的方法中可以直接拿到后端返回的数据

on-success: 文件上传成功时的钩子

// 上传成功的回调
const uploadSuccess = (val) => {
  console.log(val);
};

我们把返回的数据保存，将来创建文章提交时用到

// 后端返回上传图片的数据
const uploadImage = ref({});

// 上传成功的回调
const uploadSuccess = (val) => {
  const {
    data: { file },
  } = val;
  uploadImage.value = file;
};

上传成功后，fileList会保存上传图片的本地信息，直接会在下方展示，不需要再手动添加进去

el-upload上传图片并显示

前言

实现

基本结构

逻辑