[郑州|结业弟子]JS-王庚龙|2021年06月30日的日报-技能树.IT修真院

发表于： 2021-06-30 21:13:51

0 2008

今天完成的事情：图片上传后端成功；了解到FormData，和 FileReader,

FormData：将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

FileReader ：FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

明天计划的事情：完善angular任务，尽快完成angular框架的学习，要好好的巩固JS知识，完成深度思考问题；JS知识巩固。

收获：

使用FormData 将图片转为键对值，进行往后端服务传值；

  // 上传后端
  upload() {
    //通过FormData构造函数创建一个空对象
    var formdata = new FormData();
    //可以通过append()方法来追加数据
    formdata.append("file", this.imagePath);
    //通过get方法对值进行读取
    console.log(formdata.get("file"));

    let ulr = "/a/u/img/task";
    this.http.post<any>(ulr, formdata).subscribe((response: any) => {
      this.data = response;
      // this.dataObj = response.data.articleList;
      console.log(this.data);
    })
  }

通过FileReader 来实现获取图片的file值，来进行图片的展示及预览

  fileChange(files: any) {

    this.Rbutton = true;

    this.file = files;

    console.log(this.file); // 输出图片各部分信息

    this.fileName = files[0].name; // 图片名字

    this.fileSize = files[0].size; // 图片大小

    if (files.length === 0) {

      return;

}

    // 将图片展示出来: 读取实例

    const reader = new FileReader(); // 文件读取对象

    this.imagePath = files[0];

    reader.readAsDataURL(files[0]); // 使用刚刚设的对象取 file 的值

    reader.onload = () => {

      this.imgURL = reader.result; // 选择所要显示图片的img，赋值给img的src

};

}

返回列表

【任务6】 [郑州|结业弟子]JS-王庚龙 | 2021年06月30日 的日报

评论

分享到

【任务6】 [郑州|结业弟子]JS-王庚龙 | 2021年06月30日的日报