前言

Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

问题描述

使用vue-cropper插件进行图片切割头像，将切割后的头像转为blob文件上传，与后端对接的时候发现，blob的filename默认为‘blob’，导致后端接受数据的时候，无法根据上传图片的后缀名保存图片，全部为.blob文件，从而导致接口无法返回正确的url地址。这之中上传文件使用的是el-upload

注：vue-cropper插件可能只针对上传图片文件，不对单纯的图片进行处理，因此在初始化的展示的时候绕过去就好。

解决方法

  在图片上传后，取file.name进行保存，然后在上传到服务器前将blob文件格式转为file文件并重新命名。

以下为代码：

// vue-cropper获取截取后的图片信息，此处data为blob格式
this.$refs.cropper.getCropBlob(data => {  
   let formData = new FormData();  // 项目整体格式上传采用form数据上传
   var fileOfBlob = new File([data], this.imgName);
   formData.append("avatarfile", fileOfBlob);
   uploadAvatar(formData).then(response => {
      ...
    });
  });