【Vue3】上传文件 [element-plus - 文件预览]

文件上传一般需要查看接口文档，因为文件上传通常有两种做法：

1. 跟当前的提交是分离的，这种方式会增加服务器的负担
2. 无论用户怎么选，都是本地的预览，当用户点发布时，才是真正把图片上传到服务器，但是这个时候提交的速度会慢一些

查看接口文档

1. 没有文件上传的接口，可以看出它一定是跟发布一起提交的

2. 并且在发布的过程中，请求体中需要传文件对象，并且异步文件上传它是通过form-data的方式进行提交的

   

element-plus实际上是支持默认文件上传的。

name的默认值是file，如果需要修改，可以通过method修改

<template>
  <el-upload
    class="avatar-uploader"
    // action配置的就是后台接口地址，只要配置了action，在用户选择图片的同时，它会帮助它文件上次，请求方式会配成post，传递的name默认配成file
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :show-file-list="false"
    // success是设置自动上传之后才有用
    :on-success="handleAvatarSuccess"
    // 提交前的校验，限制格式/大小
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

但是我们这个项目是最后一起提交，所以最后要做的是前端的本地预览

1. 关闭自动上传，准备结构

关闭自动上传

element plus提供了一个钩子，帮你去监听文件的选择，由于我们这里关闭了自动上传，所以只需要关注第一个功能：添加文件，第一个形参就可以拿到uploadFile，如果涉及到多文件上传的时候，第二个参数就可以拿到uploadFiles。

在Vue中，on-change 是一个组件内部定义的自定义事件钩子，它不是HTML原生事件。el-upload是Element UI库中的一个组件，用于实现文件上传功能。这个组件提供了多个钩子函数（或称为事件处理器），on-change 就是其中之一。

当使用 el-upload 组件时，可以通过 Vue 的 v-bind (:) 缩写语法来绑定组件提供的自定义事件到父组件的方法上。

打印第一个对象，File对象就是这个raw，如果我们要创建预览地址时，需要基于这个raw createObjectURL，并且把这个值给imgURL

import { Plus } from '@element-plus/icons-vue'

<!-- 此处需要关闭 element-plus 的自动上传，不需要配置 action 等参数
   只需要做前端的本地预览图片即可，无需在提交前上传图片
   本地预览的语法：URL.createObjectURL(文件对象) 它可以基于文件对象去创建本地预览的地址
-->
<el-upload
  class="avatar-uploader"
  :auto-upload="false"
  :show-file-list="false"
  :on-change="onSelectFile"
>
  <!-- imgUrl取名短一些，并且Plus需要导包 -->
  <img v-if="imgUrl" :src="imgUrl" class="avatar" />
  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>

2. 准备数据 和 选择图片的处理逻辑

// 图片上传相关逻辑
const imgUrl = ref('')
const onSelectFile = (uploadFile) => {
  // createObjectURL会得到一个地址，直接将这个地址赋值给imgUrl
  imgUrl.value = URL.createObjectURL(uploadFile.raw) // 预览图片
  // 立即将图片对象，存入 formModel.value.cover_img 将来用于提交
  formModel.value.cover_img = uploadFile.raw
}

3. 样式美化

.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      /* 这里用到的是element plus里的css变量，在原生css里面是支持的 */
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}