element vue 上传模板_vue+element 文件上传

一、前言

element ui 已经提供了文件上传的组件，直接拿来就能用。具有以下几个特点：

限制文件上传的个数，多个文件会发起多个请求。

可以设置文件选择后自动上传或者手动触发上传，并且手动触发可以自定义上传逻辑。

可以限制文件格式和大小，比如：jpeg等之类的。

设置缩略图模板。

控制文件列表

二、代码及注意事项

ref="upload"

action="" // 注意点一

:multiple="false"

:auto-upload="false" //注意点二

:limit="2" //注意点三

accept=".csv" //注意点四

:on-change="handleChange"

:before-upload="beforeUpload"

:http-request="submitFile" //注意点五

:file-list="fileList"

:on-exceed="onExceed" //注意点六

>

选取文件

只能上传csv文件

style="margin-left: 10px;"

type="success"

@click="selectFile" //注意点七

>提 交

关于el-upload 组件提醒以下几点点：

注意点一    action=""

此属性必填，值为上传路径url。

注意点二：:auto-upload="false"

表明手动触发上传文件的行为，当 点击选择文件只是选择文件，当点击 提交 按钮时 才会真正的上传。

注意点三： :limit=2“”

限制文件上传个数为2

注意点四：accept=".csv"

当你选择文件时，默认在弹出框中过滤只显示.csv文件，当然你可以手动切换过滤的格式，仍然可以选择其他文件，

所以这种方法不能严格保证上传格式符合要求，需要在上传的时候再次校验。

注意点五：:http-request="submitFile"

此属性只有在:auto-upload="false" 才会生效，表示手动触发时将会覆盖默认上传的逻辑，

同时action="url"也会失效。所以，你可以在 submitFile 方法里实现一些业务逻辑。比如，根据不同的参数选择不同的url上传。

注意点六：:on-exceed="onExceed"

超过限制的文件数量时，回调的方法，可以给出提示。

三、问题及经验

下面说说我遇到的问题

1. 如何实现手动触发文件上传。

前面已经说了几个关键点：http-request，auto-upload, action

如果 :auto-upload=“false” 就是手动触发，进一步，如果 :http-request="submitFile" ，那么提交时将会覆盖默认的上传行为，走submitFile方法逻辑。贴下我的代码：

selectFile() {

if (this.fileObj == null) {

this.$message.error('请选择文件')

}

this.$refs.upload.submit()

console.log('发送文件..')

},

其中，this.$refs.upload.submit() 便会去调用自定义的submitFile方法。 注意哦，selectFile是 提交 按钮的事件。那真正的请求逻辑是submitFile，此时action=“url”也将失效。我采用了表单提交的方式，并且不同根据不同的参数，调用不同的url。

submitFile(item) {

this.fileObj = item.file

const formData = new FormData()

formData.append('file', this.fileObj)

if (this.type === 'USER') {

importUser(this.$store.state.user.id, formData)

}

if (this.type === 'ORG') {

importOrg(this.$store.state.user.id, formData)

}

},

2. 严格限制上传文件的格式：

前面说过可以用accept 属性，但是不能够严格保证，只是在文件选择时候根据文件后缀名进行过滤而已。所以，上传之前需要校验，在before-upload回调方法里进行逻辑处理：

beforeUpload(file) {

const iscsv = file.type === 'application/vnd.ms-excel'

if (!iscsv) {

this.$message.error('只支持csv格式的文件!')

}

return iscsv

},

那我怎么知道文件类型是什么？？可以通过方法里面的file参数知道关于此文件的所有信息。此方法返回false，将不会上传，并丢弃此文件。

3. 只能上传一个文件，并且再次选择时候覆盖第一个文件。

limit="1" 可以限制只能上传一个文件，当再次选择文件时，将会触发 on-exceed 回调方法(如果你绑定了此方法)，然后就结束后续操作了。不能满足需求。

实现方案1：

在on-exceed方法里提示用户，让用户先删除原来的文件列表，然后就可以再次上传新文件了。

onExceed(file, fileList) {

this.$message.error('只能上传一个文件，请先删除已有文件!')

},

第一个file参数，是当前选中的文件，第二个参数fileList为已经选中的文件列表。

实现方案二：

在用户选择时，默认删除第一个文件，这样无论上传多少个文件，都只会保留最后一次选择的文件。关键点：绑定handle-change 事件，将fileList中的第一个文件删除。代码如下：

handleChange(file, fileList) {

if (fileList.length > 1) {

this.$refs.upload.handleRemove(fileList[0])

}

console.log(fileList)

},

当采用这种方案时，页面上会有出现文件删除和增加的动画效果，个人觉得不是很好，因此，需要除去此效果，网上找寻一波，以下方法经受住了我的考验，和大家分享下：

/deep/ .el-list-enter-active,

/deep/ .el-list-leave-active {

transition: none;

}

/deep/ .el-list-enter,

/deep/ .el-list-leave-active {

opacity: 0;

}

以上便是在使用el-upload组件上传时的使用方法和心得，建议一定要好好阅读官方文档的实例，基本都能满足我们的需求。写的不详细的地方，一定要去看官网哦，文档都写了，睁大眼睛，传送带： https://element.eleme.cn/#/zh-CN/component/upload