点击导入按钮出现导入弹出框 选择好文件之后点击确定上传服务器同时窗口关闭
<el-button size="mini" @click="toLead = true">导入</el-button>
<el-dialog
title="导入"
:visible.sync="toLead"
width="30%"
center>
<el-upload
class="upload-demo"
ref="upload"
action=" "
:on-change = 'changeFile'
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="toLead = false">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
export default {
name: "文件名",
data(){
return {
toLead:false,
}
},
methods: {
//上传
changeFile(file){
this.fileList.push(file)
},
submit(){
let file = this.fileList[0];
let param = new FormData();
param.append("file", file.raw);
console.log(param.get("file"));
let config = {
//添加请求头
headers: { "Content-Type": "multipart/form-data" },
};
//我这边后台需要先把上传的文件名发送给后台然后返回给我url地址
this.$axios.post('地址'+ file.name,param).then(result => {
this.toLead = false;
var $result = result.data.data
console.log($result.url)
this.$axios({
//然后我通过返回给我的url地址实现上传功能
url:'地址',
method: 'post',
data: {
param:JSON.stringify({
fileName:file.name,
url:$result.url,
companyId:'7'
})
},
headers:{
//token我这边必传参数
Authorization:this.$cookie.get('token'),
}
}).then(result =>{
//上传成功
console.log(result)
alert(result.data.data.msg)
}).catch((error)=>{
alert('请求失败')
//判断是否是401
});
}).catch(error => {
alert('请求失败!');
});
},
handleRemove(file, fileList) {
console.log(file, fileList);
this.fileList.splice(0,1)
},
handlePreview(file) {
console.log(file);
},
},