el-uploud实战
时间: 2023-05-10 09:49:50 浏览: 131
el-upload 是 Element UI 中负责文件上传的组件,本文将基于实际项目中的场景,进行 el-upload 的实战讲解。
场景:在一个类似于头像上传的场景中,需要上传图片,并且需要在上传完成后立即在页面上显示上传的图片。
一、组件引入
首先,为了使用 el-upload 组件,我们需要在代码中引入组件。在文件开头 import Element UI:
```js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
然后在页面上使用 el-upload 组件,代码如下:
```html
<template>
<el-upload
action="上传图片的接口地址"
:auto-upload="false"
:file-list="fileList"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
list-type="picture-card">
<i class="el-icon-plus"></i>
<div class="el-upload__text">上传头像</div>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件,且不超过500kb
</div>
</el-upload>
<div class="avatar-preview">
<img :src="avatarUrl" v-show="avatarUrl" alt="">
</div>
</template>
```
以上代码中:
- `action` 属性指定上传图片的接口地址;
- `:auto-upload="false"` 属性表示禁止自动上传;
- `:file-list="fileList"` 绑定一个数组,用于保存上传成功的文件信息;
- `:before-upload="beforeUpload"` 方法指定在上传之前的校验,可用于限制上传文件类型及大小;
- `:on-success="uploadSuccess"` 方法用于在上传成功后的处理,最终将图片在页面上显示;
- `:on-error="uploadError"` 方法用于在上传失败后的处理;
- `list-type="picture-card"` 属性表示以卡片的形式显示上传的图片。
二、上传前的校验
我们需要在上传之前对图片进行校验,限制上传文件类型及大小,防止上传过程中出现不必要的错误。代码如下:
```js
beforeUpload(file) {
const fileType = file.type.split('/')[1]
if (fileType !== 'jpg' && fileType !== 'png') {
this.$message.error('只能上传jpg/png文件!')
return false
}
const fileSize = file.size / 1024
if (fileSize > 500) {
this.$message.error('上传文件大小不能超过500kb!')
return false
}
return true
}
```
以上代码中:
- `file.type.split('/')[1]` 通过切割文件类型获取文件后缀;
- `this.$message.error` Element UI 中的消息提示组件,用于给出用户友好的提示信息。
- `return true` 表示通过前置校验,可以进行上传。
三、上传成功后的处理
在 el-upload 中,上传成功后可以通过 `:on-success` 方法指定一个方法进行处理。根据项目需求,我们需要将上传的图片在页面上显示出来,代码如下:
```js
uploadSuccess(response, file, fileList) {
this.fileList.push({ name: file.name, url: response.data.url })
this.avatarUrl = response.data.url
}
```
在上传成功后,我们需要将上传成功的文件信息保存到 `fileList` 中。在 `this.avatarUrl` 中保存成功上传的图片地址,从而在页面上显示出来。
四、上传失败后的处理
与上传成功类似,上传失败后也可以通过 `:on-error` 方法进行处理。一般情况下,上传失败往往是由于网络原因或者服务端问题导致,我们需要给用户一个友好的提示信息,代码如下:
```js
uploadError(error, file, fileList) {
this.$message.error('上传失败,请重试!')
}
```
以上就是一个 el-upload 的实战演练。总的来说,el-upload 这个组件非常易于使用,只需要掌握三个方法(before-upload,on-success,on-error)就可以完成我们的需求。同时,Element UI 中还提供了其他的上传组件,如 el-dragger、el-cascader 等,可根据具体项目需求进行选择。