element-ui文件上传使用

<el-upload

ref="uploadRef"//给上传文件绑定一个ref必要时好清空上传文件数组

style="margin-left:10px"

:limit="limitNum" //限制上传文件个数 这里我一个对象来代替

action="" // 上传地址

multiple

:auto-upload="false" //自动上传文件

:show-file-list="false" //是否显示上传信息列表

class="upload-demo"// 关闭前的验证

:before-upload="beforeUploadFile"//上传前的验证

:on-exceed="exceedFile" //超出上传个数的验证

:on-change="fileChange" //上传文件发生改变时触发change事件

>

<el-button slot="trigger" type="primary">导入文件</el-button>

</el-upload>

——-----------------------------------------------------------------------------------------

fileChange(file, fileList) {

this.beforeUploadFile(file)

if (this.beforeUploadFile(file)) {

this. refs.uploadRef.clearFiles() //清空上传列表里面的数据

}

}

exceedFile(files, fileList) {

this. {this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)

}

beforeUploadFile(file) {

const isLt5M = file.size / 1024 / 1024 <10

if (this.allowType.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) === -1) {

this. {this.allowTypeTips} 格式!`

})

return false

}

if (!isLt5M) {

this.$message.error({ title: '系统提示', message: '上传文件大小不能超过 10MB!' })

return false

} else {

return true

}

}

uploadFile() {

if (this.fileList.length === 0) {

this. message.success({ title: '系统提示', message: '上传成功' })

this.fileList = []

} else {

this.$message.error({ title: '系统提示', message: '上传失败' })

}

})

}

},

一般情况下，element文件上传按钮点击会d出d窗，如果点击没有d窗，可能的原因有：

（1）浏览器的隐私设置中阻止了d窗，需要把隐私设置中允许d窗进行设置；

（2）未对element中upload组件进行渲染，在使用upload功能时需要先对它进行渲染；

（3）通过on-change事件去处理文件，当在on-change事件中没有return false时，可能会出现d窗没有d出的情况；

之前做上传，参考element UI的官方示例，使用action属性，action是上传的地址。

这次做的项目，换了一个后端对接，说，上传不需要调用接口，我懵了，我寻思示例不都是使用了action嘛，经过一番了解，upload组件还提供了http-request覆盖默认上传行为。

elementUI 的upload组件的http-request方法的使用

http-request有个默认的参数：content

content是一个object对象：里面包含一些upload组件的回调方法，可以使用upload组件原生的方法。

下面记录下具体使用方法，很简单

1、

:action是必不可少但是却没什么作用的

:http-request可以覆盖默认的上传方法

2、我配置的:action的值（就是官方文档示例的值）

3、:http-request函数内容，将上传成功的文件保存到mode里面，mode是自己在data里面定义的变量，初始值是mode:{}

4、上传按钮的点击事件

5、上传成功，后台可以读取到数据

---