1.第一种自动上传,需提前写好接口地址和请求参数
<template>
<div>
<el-form>
<el-upload
:show-file-list="false"
:limit="1"
:action= actionUp
:before-upload="beforeFile"
:on-success="successFile"
:data="reportData"
:file-list="fileList">
<el-button size="small" type="primary">上传</el-button>
</el-upload>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
actionUp:'http://XXXXX',//接口地址
fileList:[],
reportData:{ //请求带的参数
mold:4,
name:'123111'
}
}
},
methods: {
/**
* 文件上传之前 判断格式
* */
beforeFile(file){
let name = file.name
let type = name.substring(name.lastIndexOf('.')+1)
if (type !== 'docx') {
this.$message('请上传word文件格式');
return false
}
},
/**
*文件上传成功时的钩子
* */
successFile(file){
this.$message({
message: '上传成功',
type: 'success',
duration:1000
})
},
}
}
</script>
成功Network:
1.第二种使用http-request ,覆盖默认的上传行为,可以自定义上传的实现。
<template>
<div>
<el-form>
<el-upload
:show-file-list="false"
:limit="1"
:action= actionUp
:before-upload="beforeFile"
:http-request="fileRequest"
:file-list="fileList">
<el-button size="small" type="primary">上传</el-button>
</el-upload>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
actionUp:'aaaa',
fileList:[],
}
},
methods: {
/**
* 文件上传之前 判断格式
* */
beforeFile(file){
let name = file.name
let type = name.substring(name.lastIndexOf('.')+1)
if (type !== 'docx') {
this.$message('请上传word文件格式');
return false
}
},
fileRequest(item) {
let uploadData = new FormData()
uploadData.append('file',item.file)
this.$axios.post('http:/XXXXX',uploadData
)
.then(res =>{
// 成功
console.log('8888')
})
}
}
}
</script>