使用elementui实现表单上传功能_vue+element_ui上传文件,并传递额外参数操作

需求：

1、文件大小验证

2、文件类型验证

3、额外参数传输

:before-upload="beforeUploadForm" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">

上传文件

只能上传xlsx/xls/csv文件，且不超过{ {formMaxSize}}M

export default {

data () {

return {

formMaxSize: 10, // 上传文件大小

formFileList: [], // 显示上传文件

uploadFormFileList: [] // 确定上传文件

}

},

methods: {

// 开始上传前验证

beforeUploadForm (file) {

// 验证文件大小

if (file.size / 1024 / 1024 > this.formMaxSize) {

this.$message({

message: `上传文件大小不能超过${this.formMaxSize}M!`,

type: 'warning'

})

return false

}

// 中文乱码处理

if (file.raw) {

let reader = new FileReader() // 读取文件内容

reader.readAsText(file.raw, 'gb2312') // 防止中文乱码问题，不加reader.onload方法都不会触发

reader.onload = function (e) {

this.contentHtml = e.target.result // txt文本内容，接下来就可以对其进行校验处理了

}

}

// 验证文件类型

var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)

const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'csv'

if (!extension) {

this.$message({

message: '上传文件只能是xlsx/xls/csv格式!',

type: 'warning'

<