在使用el-upload的时候,上传文件到服务器,有时候后台要求上传token,怎么处理呢?以下是一个示例。
效果图
template中片段
<el-dialog
:modal-append-to-body="false"
title="上传文件"
:visible.sync="isUpload"
width="390px"
:close-on-click-modal="false"
ref="upload"
>
<el-upload
class="upload-demo"
accept=".jar"
drag
:action="uploadUrl"
:file-list="fileList"
:headers="headerToken"
:on-success="onSuccess"
:before-upload="beforeUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jar文件,且不超过30Mb</div>
</el-upload>
<span slot="footer">
<el-button type="warning" @click="cancelUpload()">取消上传</el-button>
</span>
</el-dialog>
data()和computed:{}中数据
data(){
return {
isUpload:false,
uploadUrl:this.$api.firmwareUpload,
}
},
computed: {
headerToken(){
return { "authorize":localStorage.getItem('token') } }
},
methods:{} 中核心方法数据
/* ** 名称:上传文件*/
beforeUpload(file) {
var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
const fileType1 = testmsg === 'jar'
const isLt30M = file.size / 1024 / 1024 < 30
if(!fileType1) {
this.$message({
message: '上传文件只能是 jar格式!',
type: 'warning'
});
}
if(!isLt30M) {
this.$message({
message: '上传文件大小不能超过 30MB!',
type: 'warning'
});
}
return fileType1 && isLt30M
} ,
onSuccess(file, fileList){
this.$message({
type: 'success',
message: '上传成功!'
});
this.isUpload=false;
},
专栏目标
在vue和openlayers联合技术栈的操控下,本专栏提供行之有效的源代码示例。
(1)提供各种地图的加载示例:baidu、高德、google,bing,OSM,stamen,maptiler,天地图,mapbox等
(2)提供地图控件的展示示例:比例尺、鹰眼、自定义版权、旋转地图、缩放地图、缩放滑块、全屏显示等
(3)提供各种数据的加载示例:geojson、JSON、KML、WKT、WMTS、SHP、WKB、GPX、CSV、MVT、geoserver数据等
(4)提供上传解析和导出示例:上传KML、KMZ、Geojson、shp、zip等,导出Image、pdf、geojson、GML、polyline等
(5)提供各种图形的绘画示例:画点、线、圆、多边形、正方形、矩形、六星芒、自由线段、自由多边形等。
(6)提供路线轨迹相关的示例:画带有箭头的线段、实现轨迹路线动画、画闪闪发光的点划线、实现风场快速移动效果等。
(7)提供地图交互事件的示例:draw、modify、snap、select、pointermove、click、dblclick、singleclick、postrender
(8)提供页面基本控制的示例:zoom控制、extent控制、feature适配、添加网格线、拖拽放大,拖拽旋转等
(9)提供测量相关的代码示例:测量面积、测量距离、显示当前zoom、显示某点经纬度等。
(10)提供综合应用相关代码:切换地图、聚合数据、列表图层双向交互显示、显示楼层信息、右键菜单、GPS定位、卷帘效果等。