@ -4,9 +4,12 @@
* @Author : sueRimn * @Author : sueRimn
* @Date : 2020 - 11 - 05 15 :27 : 58 * @Date : 2020 - 11 - 05 15 :27 : 58
* @LastEditors : sueRimn * @LastEditors : sueRimn
* @LastEditTime : 2020 - 11 - 06 10 :30 : 10 * @LastEditTime : 2020 - 11 - 06 14 :10 : 39
* / * /
import { Component , OnInit } from '@angular/core' ; import { Component , OnInit } from '@angular/core' ;
import { HttpClient , HttpHeaders , HttpEventType } from '@angular/common/http' ;
import { MatSnackBar , MatSnackBarConfig } from '@angular/material/snack-bar' ;
import { FileUploader , FileItem } from 'ng2-file-upload'
@Component ( { @Component ( {
selector : 'app-know-route' , selector : 'app-know-route' ,
@ -15,21 +18,128 @@ import { Component, OnInit } from '@angular/core';
} ) } )
export class KnowRouteComponent implements OnInit { export class KnowRouteComponent implements OnInit {
constructor ( ) { } constructor ( public snackBar : MatSnackBar , private http : HttpClient ) { }
ngOnInit ( ) : void { ngOnInit ( ) : void {
} }
unitinfo :any = {
id : '' ,
name : '' , //单位信息名字
usci : '' , //单位信用代码
contacts : '' , //联系人
phone : '' , //联系电话
address : '' , //单位地址
imageUrl : '' , //图片地址
location : '' , //单位地理位置
modifiedTime : '' , //信息修改时间
organizationId : '' , //所属组织机构
organizationName : '' , //组织机构名称
buildingTypes : [
{
id : '' ,
name : ''
}
]
}
uploader :FileUploader = new FileUploader ( { //初始化上传事件 ng2-upload
url : ` /api/Objects/PlanPlatform/ ${ sessionStorage . getItem ( 'companyId' ) } ` ,
method : "POST" ,
itemAlias : "uploadedfile" ,
autoUpload : false ,
removeAfterUpload :true //上传之后是否在队列中移除，如果不移除就会出现无法上传第二次的情况
} ) ;
//控制底部div显隐
showorfalse = "www"
//判断选中路线的值
//判断选中路线的值
chooseid = - 1 chooseid = - 1
knowRoute = [ //熟悉路线对象
{ name : ` ` , idnum : "" } knowRoute = [ { name : ` ` , idnum : "" } ]
/* {name:`柳州支队`,idnum:"🠖"} */ //熟悉部位对象
] knowBw = [ { name : "消控室" } , { name : "水泵房" } , { name : "疏散楼梯" } , { name : "各楼层" } , { name : "楼层消火栓" } , { name : "水泵结合器" } , { name : "室外消防水源" } ]
imgsrc = "../../../assets/images/upload.jpg" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
imgUrl = "" //返回来的图片地址后缀
file : any ; //上传的文件
objectName : any ; //上传对象名
uploadId : any ; //上传分块上传事件编号
isspinner :boolean = false //控制进度圈的显示隐藏
PartNumberETag : any = [ ] ; //分块上传每次返回需要保存的信息
//上传文件
startUploading() {
this . isspinner = true
let file = this . file || null //获取上传的文件
let fileSize = file . size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片
if ( file && fileSize <= shardSize ) { //上传文件<=5MB时
// this.upload()
let formData = new FormData ( )
formData . append ( "file" , file )
this . http . post ( ` /api/Objects/PlanPlatform/ ${ sessionStorage . getItem ( 'companyId' ) } ` , formData ) . subscribe ( ( data :any ) = > {
this . isspinner = false
this . imgUrl = data . objectName
this . imgsrc = ` /api/Objects/PlanPlatform/ ${ this . imgUrl } ?x-oss-process=image/resize,m_fill,h_170,w_299 `
const config = new MatSnackBarConfig ( ) ;
config . verticalPosition = 'top' ;
config . duration = 3000
this . snackBar . open ( '上传成功' , '确定' , config ) ;
} )
} else if ( file && fileSize >= shardSize ) { //上传文件>5MB时,分块上传
let data = { filename : file.name }
this . http . post ( ` /api/NewMultipartUpload/PlanPlatform/ ${ this . unitinfo . id } ` , { } , { params : data } ) . subscribe ( ( data : any ) = > { //初始化分段上传
this . objectName = data . objectName
this . uploadId = data . uploadId
this . subsectionUploading ( )
} )
}
}
//开始分块上传
async subsectionUploading ( ) {
let file = this . file || null //获取上传的文件
let fileSize = file . size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片
let allSlice = Math . ceil ( fileSize / shardSize ) //总文件/5MB===共分多少段
for ( let i = 0 ; i < allSlice ; i ++ ) { //循环分段上传
let start = i * shardSize //切割文件开始位置
let end = Math . min ( fileSize , start + shardSize ) ; //切割文件结束位置
let formData = new FormData ( )
formData . append ( "file" , file . slice ( start , end ) )
// 同步写法实现异步调用
let result = await new Promise ( ( resolve , reject ) = > {
// await 需要后面返回一个 promise 对象
this . http . post ( ` /api/MultipartUpload/PlanPlatform/ ${ this . objectName } ?uploadId= ${ this . uploadId } &partNumber= ${ i + 1 } ` , formData ) . subscribe ( ( data :any ) = > {
let msg = {
"partNumber" : data . partNumber || null ,
"eTag" : data . eTag || null
}
resolve ( msg ) // 调用 promise 内置方法处理成功
} )
} ) ;
this . PartNumberETag . push ( result )
if ( this . PartNumberETag . length === allSlice ) {
this . endUploading ( )
}
}
}
//完成分块上传
endUploading() {
let data = this . PartNumberETag
let paramsData = { uploadId : this.uploadId }
this . http . post ( ` /api/CompleteMultipartUpload/PlanPlatform/ ${ this . objectName } ` , data , { params : paramsData } ) . subscribe ( data = > {
this . imgsrc = ` /api/Objects/PlanPlatform/ ${ this . objectName } ?x-oss-process=image/resize,m_fill,h_170,w_299 `
this . isspinner = false
this . PartNumberETag = [ ]
this . uploader . clearQueue ( ) ; //清空input控件文件
} )
}
//熟悉部位点击事件
//熟悉部位点击事件
addRoute ( event ) { addRoute ( event ) {
//console.log(event.target.innerHTML)
//console.log(event.target.innerHTML)
//this.knowRoute+=event.target.innerHTML+"🠖"
//this.knowRoute+=event.target.innerHTML+"🠖"
this . showorfalse = "show"
this . knowRoute . push ( { name :event.target.innerHTML , idnum : "🠖" } ) this . knowRoute . push ( { name :event.target.innerHTML , idnum : "🠖" } )
} }
//熟悉路线点击事件
//熟悉路线点击事件
chenjingyu
4 years ago