用户回答回答于 2018-03-022018-03-02 10:40:15
看看我的代码,
输入更改处理程序:
/**
* @param fileInput
*/
public psdTemplateSelectionHandler (fileInput: any){
let FileList: FileList = fileInput.target.files;
for (let i = 0, length = FileList.length; i < length; i++) {
this.psdTemplates.push(FileList.item(i));
}
this.progressBarVisibility = true;
}
提交处理程序:
public async psdTemplateUploadHandler (): Promise<any> {
let result: any;
if (!this.psdTemplates.length) {
return;
}
this.isSubmitted = true;
this.fileUploadService.getObserver()
.subscribe(progress => {
this.uploadProgress = progress;
});
try {
result = await this.fileUploadService.upload(this.uploadRoute, this.psdTemplates);
} catch (error) {
document.write(error)
}
if (!result['images']) {
return;
}
this.saveUploadedTemplatesData(result['images']);
this.redirectService.redirect(this.redirectRoute);
}
FileUploadService。该服务还存储上传进度$属性
import { Component } from 'angular2/core';
import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/share';
@Injectable()
export class FileUploadService {
/**
* @param Observable<number>
*/
private progress$: Observable<number>;
/**
* @type {number}
*/
private progress: number = 0;
private progressObserver: any;
constructor () {
this.progress$ = new Observable(observer => {
this.progressObserver = observer
});
}
/**
* @returns {Observable<number>}
*/
public getObserver (): Observable<number> {
return this.progress$;
}
/**
* Upload files through XMLHttpRequest
*
* @param url
* @param files
* @returns {Promise<T>}
*/
public upload (url: string, files: File[]): Promise<any> {
return new Promise((resolve, reject) => {
let formData: FormData = new FormData(),
xhr: XMLHttpRequest = new XMLHttpRequest();
for (let i = 0; i < files.length; i++) {
formData.append("uploads[]", files[i], files[i].name);
}
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.response));
} else {
reject(xhr.response);
}
}
};
FileUploadService.setUploadUpdateInterval(500);
xhr.upload.onprogress = (event) => {
this.progress = Math.round(event.loaded / event.total * 100);
this.progressObserver.next(this.progress);
};
xhr.open('POST', url, true);
xhr.send(formData);
});
}
/**
* Set interval for frequency with which Observable inside Promise will share data with subscribers.
*
* @param interval
*/
private static setUploadUpdateInterval (interval: number): void {
setInterval(() => {}, interval);
}
}
// 上传表格1
readExcel(e) {//表格导入
const files = e.target.files;
// console.log(files);
if (files.length <= 0) {//如果没有文件名
return false;
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
this.msg.error(‘sss’);
// this.msg.error('上传格式不正确,请上传xls或者xlsx格式');
return false;
}
const fileReader = new FileReader();
fileReader.onload = (ev: any) => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: 'binary'
});
const wsname = workbook.SheetNames[0];//取第一张表
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);//生成json表格内容
// console.log(ws);
const excellist = [];//清空接收数据
//编辑数据
for (var i = 0; i < ws.length; i++) {
excellist.push(ws[i]);
}
// 此时得到的是一个内容是对象的数组需要处理
// console.log(excellist);
let arr1 = excellist.map(_ => Object.values(_)[0]);
// console.log(arr1);
this.XXX = arr1.map(........);
} catch (e) {
// console.log('出错了')
return false;
}
};
fileReader.readAsBinaryString(files[0]);
this.myBlackBoxChange = false;
// 如果需要後台處理表格數據,就執行如下操作1
// 如果是發送後台解析,就這樣發送1
// let url = BaseUrl.path +'/ZZZ;
// let myformdataFile = {
// file: e.target.files[0]
// }
// if (e.target.files[0]) {
// this.http.post(url, myformdataFile).subscribe((res: any) => {
// if (res.status == 'success') {
// console.log(res)
// } else {
// this.msg.warning(res.message);
// return false;
// }
// });
// }
// 如果是發送後台解析,就這樣發送2
// 如果需要後台處理表格數據,就執行如下操作2
}
// 上传表格2