自定义文件上传组件，文件流转本地HTTP地址

 最近开发遇到一个之前很少遇见的一个问题，在此记录一下。

1.当后端文件被要求加密传输时，无法返回对应的HTTP地址只能返回文件流，而前端图片又不能直接绑定文件流去展示，此时需要我们将文件流转换成本地HTTP地址。这种后台需要将文件加密的而导致不能直接返回对应文件地址的情况其实在开发中也是比较常见的。

2.自定义文件上传组件时，获取到的fileList数据也是文件流，此时也需要将fileList数据中的文件流转换成前端可使用的HTTP地址，才能使用img去展示。

//文件流转前端本地HTTP核心方法
//一般上传的文件数据raw就是他的流
//后台返给你的响应数据一般直接就是流
window.URL.createObjectURL(这里放流数据)

 

*依据评论添加的代码，文件大小以及文件类型校验。

//检测文件变动获取文件
    changeFilelist(file, fileList) {
      this.fileList = fileList
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.fileList.forEach((item, index) => {
            if (item.name == file.name) {
              this.fileList.splice(index)
            }
          })
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      // 校检文件类
      if (this.fileType) {
        // 监测上传文件类型是否符合
        const isTypeOk = this.fileType.some((type) => {
          if (file.name.indexOf(type) > -1) return true;
          return false;
        });
        // 如果不符合需要剔除
        if (!isTypeOk) {
          this.fileList.forEach((item, index) => {
            if (item.name == file.name) {
              this.fileList.splice(index)
            }
          })
          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      return true;
    },