简单讲解下element-plus中的文件上传组件 <el-upload>

陈cCCc
1,364 阅读3分钟

前言

Element-plus官网地址：一个 Vue 3 UI 框架 | Element Plus (element-plus.org) 给大家简单的讲一下element-plus的文件上传组件吧，这也是个人觉得写vue后台管理项目一个非常好用快捷的ui框架，没有过多的话语，我们长话短说吧！

主要内容

   <el-upload ref="uploadRef"
       accept=".jpg,.jpeg,.png"
       :headers="headers"
       v-model:file-list="fileList"
       class="upload-demo"
       :action="actionUrl"
       :show-file-list="false"
       :limit="1"
       :on-success="handleAvatarSuccess"
       :before-upload="beforeAvatarUpload">
       <el-button type="primary">上传头像</el-button>
    </el-upload>

这是本人接到的一个需求，用于上传头像的代码片段,那么给大家解释一下一些我自己用到的属性解释：

accept: 接受文件上传的类型，但是这里要注意的是，只设置accept只是当你打开文件上传的窗口只会展示你所限制的文件类型，当你选择了所有文件依然可以成功的上传其他文件

image.png

如果你需要对文件上传的类型进行限制，那么你需要在文件上传之前这个钩子函数(before-upload)进行校验哦~

// 上传头像之前
function beforeAvatarUpload(file) {
  let whiteName = ['jpg', 'jpeg', 'png']
  let filename = file.name
  let index = filename.indexOf('.')
  let hzName = filename.substring(index + 1)
  if (whiteName.indexOf(hzName) != -1) {
    return
  } else {
    ElMessage({
      message: '仅支持jpg/jpeg/png格式',
      type: 'warning',
    })
    uploadRef.value.abort()
    uploadRef.value.clearFiles()
  }
}

action: 这个属性用于请求的url，一般后端会提供一个文件上传的地址给前端，这里又有地方需要注意哈~这里后端要求需要传一个token所以需要加一个headers属性 getToken这个方法是获取到了存储在当前本地的token

这里要跟后端协商好headers需要传什么哈，否则就会报错，报错，报错！

const headers = ref({ Authorization: 'Bearer ' + getToken() })

这就是不携带headers的后果！！！

image.png

data: 上传时额外携带的参数，因为这里后端不需要我携带其他参数所以data属性就用不上啦

limit: 这是一个限制文件上传的最大数量属性，因为头像只能限制当前上传一张所以我设置了:limit='1'，加了这个属性之后，我发现当我选择这个图片上传了觉得这个图片不合适需要进行第二次上传之后，我发现它没有反应了！！ 原来上传了一张他的filelist就会有这张图片的信息，因为限制了只能上传一张所以！！！第二次上传我就清空他的文件列表就好啦！！

最后一步就是文件上传成功啦！这时候在on-success这个钩子会返回后端传来的参数，这里后端是传给了我一个图片地址哈~

// 上传头像成功
function handleAvatarSuccess(res) {
  uploadRef.value.clearFiles()
  imgUrl.value = decodeURIComponent(sm2Decrypt(res.data))
  ElMessage({
    message: '上传成功',
    type: 'success',
  })
}

结尾

整个流程下来大概就是：

文件上传--携带请求头和参数--上传之前的钩子（判断文件类型）--上传成功的钩子（后端返回的数据）

不同的需求都会有不同的文件上传功能，欢迎大家到评论区说说自己遇到的文件上传需求哈，对于新手入门写这个功能来说一定要注意携带参数！！！以及文件上传的钩子！！！并且要认真看element-plus的官方文档哦~里面还有很多很多属性和api是本人还没提到的哈，本人也是入行前端没多久的小玩家哈哈哈哈，欢迎各位大佬给建议指导！！！

avatar
文章
阅读
粉丝