vue+element_ui上传文件,并传递额外参数操作
191 浏览量
2021-01-18
15:42:59
上传
评论 2
收藏 59KB PDF 举报
vue+element_ui上传文件上传文件,并传递额外参数操作并传递额外参数操作
需求：需求：
1、文件大小验证
2、文件类型验证
3、额外参数传输
<template>
<el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-
remove="formHandleRemove"
:before-upload="beforeUploadForm" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
<el-button type="primary">上传文件</el-button>
<span slot="tip" class="el-upload__tip" style="margin: 0 10px;">只能上传xlsx/xls/csv文件，且不超过{{formMaxSize}}M</span>
</el-upload>
</template>
<script>
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'
})
}
return extension
},
// 移除上传列表中文件
formHandleRemove (file, formFileList) {
let thiz = this
for (let i = 0; i < thiz.uploadFormFileList.length; i++) {
if (thiz.uploadFormFileList[i].pname === file.name) {
thiz.uploadFormFileList.splice(i, 1)
break
}
}
},
// 允许上传文件个数验证
formHandleExceed (files, formFileList) {
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + formFileList.length} 个文件`)
},
// 上传文件
handleUploadForm (param) {
let thiz = this
let formData = new FormData()
formData.append('uid', '上传文件编号') // 额外参数
formData.append('files', param.file)
let loading = thiz.$loading({
资源评论
