在vue框架中:
https://mp.weixin.qq.com/s/u5RXumT3NPtayq--krRKKg
在mako框架中:
<%inherit file="/base.html"/>
<%block name="content">
<div id="app">
<form>
<input type="file" name="fileup" id="uploadEventFile" @change="fileChange($event)" style="display:none"/>
</form>
<i-button @click="importData($event)" type="primary">导入</i-button>
<span>{{ file_name }}</span>
</div>
</%block>
<script>
Vue.prototype.$http = axios;
Vue.use(iview);
new Vue({
el: '#app',
data() {
return {
file_name: '',
file_path
}
},
methods: {
importData(event) {
event.preventDefault();
$('#uploadEventFile').trigger('click')
},
//上传excel和word都可以,excel是(.xls,.XLS),word是(.docx,.DOCX),pdf是(.pdf,.PDF)
fileChange(el) {
el.preventDefault();//取消默认行为
let uploadEventFile = $('#uploadEventFile').val();
this.file = el.target.files[0];
if (uploadEventFile == '') {
alert('请择excel,再上传');
} else if (uploadEventFile.lastIndexOf('.xls') > 0 || uploadEventFile.lastIndexOf('.XLS') > 0) {
let formData = new FormData();
// 向 formData 对象中添加文件
formData.append('file', this.file);
let config = {
// 一定要定义头
headers: {
'Content-Type': 'multipart/form-data'
}
};
// url为对应的后端接口
this.$http.post('${SITE_URL}upload_file/', formData, config).then(res => {
alert('上传成功,路径为:' + res.data.data.Path)
this.file_name = this.file.name
this.file_path = res.data.data.Path
})
} else {
alert('只能上传excel文件');
}
},
},
mounted() {
}
})
</script>
<style></style>