使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法

使用angular框架写前端的用户一般都比较喜欢用ngZorro，本人最近在使用ngZorro中的Upload自定义文件组件（链接： ngZorro自定义上传）上传时遇到如下问题。
问题描述：

该组件实例代码

import { HttpClient, HttpEvent, HttpEventType, HttpRequest, HttpResponse } from '@angular/common/http';
import { Component } from '@angular/core';
import { UploadXHRArgs } from 'ng-zorro-antd';
import { forkJoin } from 'rxjs';@Component({selector: 'nz-demo-upload-custom-request',template: `<nz-upload nzAction="https://jsonplaceholder.typicode.com/posts/" [nzCustomRequest]="customReq"><button nz-button><i nz-icon nzType="upload"></i><span>Click to Upload</span></button></nz-upload>`
})
export class NzDemoUploadCustomRequestComponent {constructor(private http: HttpClient) {}customReq = (item: UploadXHRArgs) => {// Create a FormData here to store files and other parameters.const formData = new FormData();// tslint:disable-next-line:no-anyformData.append('file', item.file as any);formData.append('id', '1000');const req = new HttpRequest('POST', item.action!, formData, {reportProgress: true,withCredentials: true});// Always returns a `Subscription` object. nz-upload would automatically unsubscribe it at correct time.return this.http.request(req).subscribe((event: HttpEvent<{}>) => {if (event.type === HttpEventType.UploadProgress) {if (event.total! > 0) {// tslint:disable-next-line:no-any(event as any).percent = (event.loaded / event.total!) * 100;}item.onProgress!(event, item.file!);} else if (event instanceof HttpResponse) {item.onSuccess!(event.body, item.file!, event);}},err => {item.onError!(err, item.file!);});};

解决方法：
将withCredentials的值由true改为false。

 const req = new HttpRequest('POST', item.action!, formData, {reportProgress: true,withCredentials: false});

使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法相关推荐

Ant Design Upload 自定义上传 customRequest
本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现目录 Upload 常用属性和方法默认上传 customRequest 自定义上传 Upload 自定 ...
FTP连接不上，不能显示列表，不能上传文件等问题解决方法汇总
FTP连接不上,不能显示列表,不能上传文件等问题解决方法汇总前言连接不上不能显示文件列表或上传下载失败前言本人使用的是Centos7,安装的vsftpd 当使用工具或者API连接FTP服务器 ...
antd Upload 自定义上传
需求由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件导致上传路径为空情况解决办法使用自定义上传 // 自定义上 ...
React Antd Upload自定义上传customRequest
单独的上传图片接口要传参,action方式不太适合,需要使用自定义上传customRequest覆盖公司代码不可弄,就发一个可用的demo例子 import React, { useState } ...
IIS 6和IIS 7 中设置文件上传大小限制设置方法，两者是不一样的
在IIS 6.0中设置文件上传大小的方法,只要设置httpRuntime就可以了 <system.web><httpRuntime executionTimeout="36 ...
[项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor自定义上传路径配置...
在上一篇文章中,我介绍了FCKeditor的一些相关知识以及我在使用过程中碰到的一些问题及解决方案,今天这篇则是主要记录如何通过FCKeditor来分类管理上传的文件. 以下是本文所要介绍的内容: 1 ...
【Antd Design Upload】 antd Upload 上传时只有Uploading状态，无法获取返回的数据
问题:antd Upload 上传时只触发Uploading状态,无法获取服务器返回的response,根据控制台的结果发现只有一种Uploading,上传图片时只触发了一次. 根据官网可以知道.上传 ...
使用element-ui的upload组件上传代码包时遇到的问题及总结
1.在工作中使用element-ui的upload组件时,遇到一个问题就是这个upload会自动发送一个http请求,即使你使用了http-request自定义上传覆盖默认上传函数,也会导致在控制台里 ...
【报错笔记】在做图片上传时上传图片后可以跳转到上传成功界面，也没有报错，数据库中也传入了值，可是eclipse中webapp下怎样都无法生存目录。
在做图片上传时上传图片后可以跳转到上传成功界面,也没有报错,数据库中也传入了值,可是eclipse中webapp下怎样都无法生存目录. 我使用UUID生成8级目录,在webapp下创建目录,将图片传进 ...

使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法

使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法

使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法相关推荐

最新文章

热门文章