Angular4上传和下载

最新推荐文章于 2022-07-27 15:35:52 发布

chuisan8661

最新推荐文章于 2022-07-27 15:35:52 发布

阅读量327

点赞数

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/u/3625236/blog/1616664

版权

Angular4上传和下载

下载文件

Angular4的单页应用通过Http服务器反向代理后接口的文件流就会放到body中返到客户端，导致浏览器不能识别下载。

下载部分代码如下：

  @Injectable()
  export class HttpService {
    constructor(
      private http: HttpClient,
    )
    {

    }
    //Blob请求
    requestBlob(url:any,data?:any):Observable<any>{
      return this.http.request("post",url,{body: data, observe: 'response',responseType:'blob'});
    }
    //Blob文件转换下载
    downFile(result,fileName,fileType?){
      var data=result.body;
      var blob = new Blob([data], {type: fileType||data.type});
      var objectUrl = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.setAttribute('style', 'display:none');
      a.setAttribute('href', objectUrl);
      a.setAttribute('download', fileName);
      a.click();
      URL.revokeObjectURL(objectUrl);
    }
  }
  @Injectable()
  export class RestService {
    //导出
    export(data:any,fileName:string,fileType?:any){
      let url ='';
      this.httpService.requestBlob(url, data).subscribe(result => {
        this.httpService.downFile(result,fileName,fileType||"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
      })
    }
  }

下载部分代码详解

首先介绍responseType共有 'arraybuffer' | 'blob' | 'json' | 'text' 这么几种类型，blob是大文件用作文件的下载。所以这里http request请求的responseType用blob。
fileType是标准的浏览器支持的文件格式。
请求后拿到request然后调用downFile将带有blob的body体转换下载，其中利用隐藏a标签和download属性实现下载。

上传文件

由于客户端和接口交互采用json的方式，不使用原有的multipart/form-data方式上传，而是采用base64的方式上传。

上传部分代码如下：

  myUploader(event) {
    let uploadFile = event.files[0];
    let reader = new FileReader();
    reader.onloadend = function() {
      let base64SplitReg=/^data:image\/(jpeg|png|gif);base64,/;
      let base64 = reader.result; // base64就是图片的转换的结果
      base64=base64.replace(base64SplitReg,'');
      uploadFile(base64).subscribe(result=>{
        if(result.success){
          //上传成功
        }else{
          //上传失败
        }
      })
    }.bind(this);
    reader.readAsDataURL(uploadFile);
  }
  //上传文件
  uploadFile(base64fill:any):Observable<ResponseData>{
    let url =this.dfsUrl+'/files';
    let params={
      "filelen":"1",//文件长度，预留，填常量“1”
      "filetype":"jpg",
      "base64fill":base64fill
    }
    return this.http.request('post',url, params).map((res:any) => {
      return res.body;
    },err=>{
      
    })
  }