angular5 上傳多個文件

html代碼:

? ? ? ? ? ? ? ? ? ? ? ? <div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<input type="text" nz-input name="singles" [(ngModel)]="singleFile"> //singleFile綁定的就是file的name

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<label for="file">Upload file</label>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<input id="file" #file type="file" multiple (change)="upload(file)" />

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //<span *ngIf="uploadProgress > 0 && uploadProgress < 100">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// {{uploadProgress}}%?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //</span>

? ? ? ? ? ? ? ? ? ? ? ? ? </div>

ts代碼:

//聲明
?uploadProgress: any;

? singleFile = [];

? // 上傳多個

? upload(file: HTMLInputElement) {

? ? // const token = localStorage.getItem('token');

? ? let headers: HttpHeaders = new HttpHeaders();

? ? // headers = headers

? ? //? .set('Cache-Control', 'no-cache')

? ? //? .set('Authorization', 'Bearer ' + token);

? ? if (file.value.length === 0) {

? ? ? return;

? ? }

? ? const files: FileList = file.files;

? ? const fileLength = files.length;

? ? const formData: FormData = new FormData();

? ? for (let index = 0; index < fileLength; index++) {

? ? ? // 多個file

? ? ? const singleFile = files.item(index);

? ? ? // files 這個名字和spring mvc controller參數(shù)的名字要對應

? ? ? formData.append('upfile', singleFile);

? ? ? this.singleFile.push(singleFile.name);

? ? }

? ? formData.append('filecategory', 'grSupportant');

? ? // for (let singleFile of files.item) {

? ? //? formData.append(singleFile.name, singleFile);

? ? // }

? ? // formData.append('file', file.files[0]);

? ? const url = 'http://localhost:8764/api/v1/user/fileUpload';

? ? // const req = new HttpRequest('POST', url, formData, {

? ? //? reportProgress: true, headers: headers

? ? // });

? ? // this.http.request(req).subscribe(event => {

? ? //? if (event.type === HttpEventType.UploadProgress) {

? ? //? ? this.uploadProgress = Math.round(100 * event.loaded / event.total);

? ? //? } else if (event instanceof HttpResponse) {

? ? //? ? console.log('Files uploaded!');

? ? //? ? this.singleFile = [...this.singleFile];

? ? //? ? console.log(this.singleFile);

? ? //? }

? ? // });

? ? this.http.post(url, formData, { headers: headers }).subscribe(data => {

? ? ? console.log(data);

? ? ? if (data['code'] == 0) {

? ? ? ? this.singleFile = [...this.singleFile];

? ? ? }

? ? });

? }

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末紊遵,一起剝皮案震驚了整個濱河市某筐,隨后出現(xiàn)的幾起案子校翔,更是在濱河造成了極大的恐慌恕洲,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,029評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件箭养,死亡現(xiàn)場離奇詭異屈嗤,居然都是意外死亡圆米,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評論 3 385
  • 文/潘曉璐 我一進店門声畏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來撞叽,“玉大人,你說我怎么就攤上這事插龄≡钙澹” “怎么了?”我有些...
    開封第一講書人閱讀 157,570評論 0 348
  • 文/不壞的土叔 我叫張陵均牢,是天一觀的道長糠雨。 經(jīng)常有香客問我,道長徘跪,這世上最難降的妖魔是什么甘邀? 我笑而不...
    開封第一講書人閱讀 56,535評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮垮庐,結果婚禮上松邪,老公的妹妹穿的比我還像新娘。我一直安慰自己哨查,他們只是感情好逗抑,可當我...
    茶點故事閱讀 65,650評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般邮府。 火紅的嫁衣襯著肌膚如雪浙于。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,850評論 1 290
  • 那天挟纱,我揣著相機與錄音羞酗,去河邊找鬼。 笑死紊服,一個胖子當著我的面吹牛檀轨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播欺嗤,決...
    沈念sama閱讀 39,006評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼参萄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了煎饼?” 一聲冷哼從身側響起讹挎,我...
    開封第一講書人閱讀 37,747評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吆玖,沒想到半個月后筒溃,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,207評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡沾乘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,536評論 2 327
  • 正文 我和宋清朗相戀三年怜奖,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片翅阵。...
    茶點故事閱讀 38,683評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡歪玲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掷匠,到底是詐尸還是另有隱情滥崩,我是刑警寧澤,帶...
    沈念sama閱讀 34,342評論 4 330
  • 正文 年R本政府宣布讹语,位于F島的核電站钙皮,受9級特大地震影響,放射性物質發(fā)生泄漏募强。R本人自食惡果不足惜株灸,卻給世界環(huán)境...
    茶點故事閱讀 39,964評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望擎值。 院中可真熱鬧慌烧,春花似錦、人聲如沸鸠儿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至汹粤,卻和暖如春命斧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背嘱兼。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評論 1 266
  • 我被黑心中介騙來泰國打工国葬, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人芹壕。 一個月前我還...
    沈念sama閱讀 46,401評論 2 360
  • 正文 我出身青樓汇四,卻偏偏與公主長得像,于是被迫代替她去往敵國和親踢涌。 傳聞我的和親對象是個殘疾皇子通孽,可洞房花燭夜當晚...
    茶點故事閱讀 43,566評論 2 349

推薦閱讀更多精彩內(nèi)容

  • =========================================================...
    _燈火闌珊處閱讀 2,404評論 0 3
  • pyspark.sql模塊 模塊上下文 Spark SQL和DataFrames的重要類: pyspark.sql...
    mpro閱讀 9,448評論 0 13
  • 不論你是偉人,還是凡人睁壁。不論你是高管背苦,還是百姓。不論你是學者潘明,還是文盲行剂。人品最重要!不是嗎钉疫? 具備好的人品硼讽,天時地...
    煜乾的媽媽閱讀 483評論 7 2
  • 昨晚10點做了一個H5的214情人節(jié)公司宣傳,發(fā)到產(chǎn)品群壤躲;回去還追劇到2點城菊。今天工作似乎都很不得勁,是我思維產(chǎn)生了...
    空若天藍閱讀 154評論 0 0