1.封装的post请求
import axios from './axios.js' //引入axios文件
export function post (url, data) {
return axios({
method: 'post',
url,
data: {
...data
}
})
}
//修改后 正常了
export function post (url, data) {
return axios({
method: 'post',
url,
data: data
})
}
2.api文件里面引用post封装请求
import { post } from '@/axios' //引用axios
//上传文件接口
export function uploadFile(type, data) {
return post(urlbase+'/user/prompt/upload/'+type,data)
}
3.上传文件组件
<template>
<div>
<div class="upload" v-show="this.operation!=2">
<el-button class="but" @click="downloadTemplate">下载导入模板</el-button>
<el-upload
:headers="headers"
accept=".xls, .xlsx, .csv"
:show-file-list='false'
class="upload-demo"
action="#"
:on-error="uploadFied"
:before-upload="beforeUploadxls"
:file-list="fileList">
<el-button size="small" type="primary">批量导入</el-button>
<div v-show="!nums" slot="tip" class="el-upload__tip">支持上传xls、xlsx、csv格式的文件,最大2M</div>
</el-upload>
</div>
<div v-show="this.fielId">
<ul class="el-upload-list el-upload-list--text" style="position: relative;width: 200px;left:0px;">
<li tabindex="0" class="el-upload-list__item is-success">
<a class="el-upload-list__item-name">
<!-- <i class="el-icon-document"></i> -->
{{this.fileNmae}}</a>
<label class="el-upload-list__item-status-label"><i
class="el-icon-upload-success el-icon-circle-check"></i></label>
<i @click="handleRemove" class="el-icon-close"></i>
<i class="el-icon-close-tip">按 delete 键可删除</i></li>
</ul>
<span style="color: darkorange;">导入成功{{this.nums}}条,<span @click="downloads" :disabled='false' style="color: #409EFF;">查看上传结果</span></span>
</div>
</div>
</template>
<script>
import {uploadFile,} from '../api/user'
export default {
props:['value',"num","types","operation"],
data(){
return{
fielId:this.value,
fileList:[],
loading:false,
fileNmae:'',//文件名称
nums:'',//成功条数
}
},
watch: {
value(newValue) {
// console.log('newValue',newValue);
this.fielId = newValue;
}
},
methods: {
//上传前验证格式
beforeUploadxls(file) {
console.log('file',file);
const extension = file.name.split(".")[1] === "xls" || file.name.split(".")[1] === "xlsx" || file.name.split(".")[1] === "csv";
const isSize = file.size / 1024 / 1024 > 2;
if (!extension) {
this.$message.warning("文件格式有误!");
return false;
}
if(isSize){
this.$message.warning("上传文件大小不能大于2M!");
return false;
}
this.loading = this.$loading({
lock: true,
text: "上传中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
console.log(111,this.fileList);
let formdata = new FormData();
formdata.append("template",file);
console.log('formdata-file', formdata.get('file'));
uploadFile(this.types,formdata).then(res=>{
let {fileId,succeedLine}=res.data
if(res.code==200){
this.$message.success(res.message)
//上传成功赋值
this.fileNmae=file.name
this.nums=succeedLine
this.$emit("input", fileId)
}else{
this.$message.error(res.message)
}
this.loading.close()
}).catch((err)=>{
this.loading.close()
})
},
//查看上传结果
downloads(){
},
//下载模板
downloadTemplate(){
let a = document.createElement("a");
a.href = "./template/TipTemplate.xlsx";
// a.download = "导入模板.xlsx";
a.style.display = "none";
document.body.appendChild(a);
a.click();
a.remove();
},
//删除
handleRemove(file, fileList){
console.log('删除');
this.fielId=''
this.$emit('input', '')
},
//上传失败
uploadFied(err, file, fileList){
console.log('失败');
this.loading.close()
}
},
created() {
},
computed:{
}
}
</script>
<style lang="less" scoped>
.upload{
display: flex;
.but{
height: 33px;
margin-right: 10px;
}
.el-upload__tip{
position: relative;
right: 116px;
}
}
</style>
导致文件流获取值一直传不到后端,解决办法修改post请求,data写法