vue上传文件流

import axios from "axios"

export function request(config){
  const require = axios.create({
    method:config.method || 'post',
    baseURL:'/api/ebook/lan',//你的接口
    timeout:10000,
    headers:config.method ||{'Content-Type': 'application/json;charset=utf-8'},
    data:config.data,
    withCredentials:true
  })

  return require(config)
}

<template>
<div class="flex">
<button type="text" @click="dialogFormVisible = true" class="addBtn">添加</button>
<el-dialog title="数据添加" :visible.sync="dialogFormVisible" width="600px" :before-close="close">
<el-form :model="partyFlag" ref="partyFlag">
<el-form-item prop="description" label="姓名或描述:" :label-width="formLabelWidth" :rules="[{ required: true, message: '不能为空'},{ type:'' ,message: '请输入非数字类型'}]">
<el-input type="description" autocomplete="off" placeholder="请输入" v-model.number="partyFlag.description"></el-input>
</el-form-item>
<el-form-item label="文件:" :label-width="formLabelWidth" :rule="{ required: true, message: '请上传图片' }">
<div class="upload">
<input type="file" autocomplete="off" placeholder="选择上传文件" class="uploadFile" @change="File"></input>
<div class="fileNameShow">{
{file.name}}</div>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="uploadBtn">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {request} from "../../../../network/request";
export default {
name: "dataAdd",
data(){
return{
file:[name=''],
dialogFormVisible:false,
formLabelWidth: '120px',
// 表单验证验证的必须是数组
partyFlag:{
imgPath:'',
description:''
},
}
},
methods:{
File(event){
this.file = event.target.files[0]
},
uploadBtn() {
this.$refs.partyFlag.validate((valid) => {//表单验证
if (valid) {
// 写接口
if(this.file64 === '') {
this.$message('请先上传文件')
}else {
let formData = new FormData()//创建formdata来存文件
let file = this.file
formData.append("file",file)//存入文件
formData.append('nId',0)//存入需要和文件一起上传的数据
request({
url:'/partyFlag/addData.dao',//写你的路径
data:formData//只需要上传formdata就行了
}).then(res =>{
this.dialogFormVisible = false
this.partyFlag.imgPath = ''
this.partyFlag.description = ''
this.file64 = ''
this.file = []
this.$message('添加成功')
}).catch(err =>{
this.$message('请求或者网络异常')
})
}
} else {
return false;
}
});
},
close(){
this.dialogFormVisible=false
this.partyFlag.imgPath = ''
this.partyFlag.description = ''
this.file64 = ''
this.file = []
}
},
}
</script>
<style scoped>
.flex{
flex:3.5;
}
.addBtn{
width: 80px;
height: 30px;
background-color:#7EC0EE;
border-radius: 0;
border-width: 0;
color: #FFFFFF;
font-size: 12px;
margin: 23px 0 15px 30px;
}
.upload{
width: 400px;
height: 90px;
border: solid 1px #EBEBEB;
}
.uploadFile{
width: 100px;
height: 90px;
opacity: 0;
}
.fileNameShow{
position: absolute;
top: 5px;
left: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:350px;
}
</style>