likes
comments
collection

使用element-ui中的el-upload自定义上传

作者站长头像
站长
· 阅读数 8

题引:

日常开发系统的时候,我们都会有上传文件的功能。但是用原生的文件上传是很繁琐的,那么我们都会选择使用UI组件库,如element-plus、ant-design等。这些UI组件库是非常容易上手且实用的,但是万恶的需求是奇怪多变的,我们单纯使用组件库默认的上传方式是不符合我们的需求的,如不自动上传、上传各个阶段时进行监听等,那这个时候我们使用 自定义上传 就显得肥肠合适。

正文:

我遇到的问题是选择阶段进行文件信息获取并进行特殊处理,并处理成手动上传,于是我很果断选择自定义上传来处理。下面直接放代码。

<el-upload
    class="upload-demo"
    ref="xlsUpload"
    action=""
    :show-file-list="false"
    :file-list="fileList"
    :http-request="handleFileUpload"
    >
    上传
</el-upload>

当我们使用 自定义上传 的时候,需要两步

  1. action 赋值为空字符串
  2. 添加 :http-request"

当我们完成上面两步时,那么我们就可以在 http-request 对应的回调函数进行逻辑处理: 下面我简单写了一些常用的判断

// 自定义上传事件
handleFileUpload({ file }) {
    // file里面包含所选择的文件信息
    // 如果文件类型不符合xls|xlsx,也可以进行其他的判断
    if (file.name.slice(-3) != "xls" && file.name.slice(-4) != "xlsx") {
        this.$message.error("上传文件只能是 XLS | XLSX 格式!");
        return false;
     }else{
        // 通过URL.createObjectURL可以获取文件的真实url,需要slice是因为前缀有blob:
        const fileUrl = URL.createObjectURL(file).slice(5)
        // 类型通过则把文件变成formData的形式,因为文件一般是formData数据
        const formData = new FormData();
        formData.append('file',file);
        
        // 发送网络请求
        ...
     }
     
},

就这么简单的就可以实现自定义上传,不再限制于UI组件库自带的上传方式,so easy。

结尾:

以上就是如何实现自定义上传的方法,很简单吧哈哈哈。觉得可以就帮忙点个赞。