【报Bug】uni.uploadFile 在h5下上传blob文件链接的时候无法获取文件名后缀

uni.uploadFile 这个函数在h5上传经过图片压缩处理的文件时有bug,无法自定义上传文件的后缀,而且会自动补充一个不带后缀的文件名,会导致后端拿不到文件的后缀,如果设置了文件上传的白名单会无法检测到文件后缀导致上传失败.

而且这个问题在2020年就出现了至今没有修复,特地提交bug,请求uniapp官方进行修复或者给api新增自定义上传文件名的功能

如果有人碰到了这个问题,我使用axios写了blob链接上传的逻辑才解决,以下是我的代码,碰到这个问题的朋友可以参考:

uploadFile(url, filePath, data) {    
        let token = uni.getStorageSync('token');    
        return new Promise((resolve, reject) => {    
            const blobUrl = filePath    
            // 通过XMLHttpRequest对象将Blob链接转换为Blob对象    
            const xhr = new XMLHttpRequest();    
            xhr.open('GET', blobUrl);    
            xhr.responseType = 'blob';    
            xhr.onload = () => {    
                var blob = xhr.response;    
                var ext = blob.type.split('/').pop(); // 获取文件的后缀    
                const file = new File([xhr.response], 'filename.'+ext, {type: blob.type});    

                // 创建FormData对象并将文件和其他参数添加到其中    
                const formData = new FormData();    
                formData.append('file', file);    

                Object.keys(data).forEach(key => {    
                    console.log(key, data[key]);    
                    formData.append(key, data[key]);    
                });    

                // 使用axios上传文件    
                axios.post(url, formData, {    
                    headers: {    
                        'Token'      : token,    
                        'Content-Type': 'multipart/form-data'    
                    }    
                }).then(response => {    
                    resolve(response.data)    
                }).catch(error => {    
                    reject(error)    
                });    
            };    
            xhr.send();    
        })    
    },

以下为图片压缩的代码:

 compressImage(localImagePath, quality, callback) {  
      var xhr = new XMLHttpRequest();  
      xhr.open('GET', localImagePath, true);  
      xhr.responseType = 'blob';  
      xhr.onload = function() {  
        if (xhr.status === 200) {  
          var blob = xhr.response;  
          var ext = blob.type.split('/').pop(); // 获取文件的后缀  
          var reader = new FileReader();  
          reader.onloadend = function() {  
            var img = new Image();  
            img.onload = function() {  
              var canvas = document.createElement('canvas');  
              var ctx = canvas.getContext('2d');  
              var width = img.width;  
              var height = img.height;  
              canvas.width = width;  
              canvas.height = height;  
              ctx.drawImage(img, 0, 0, width, height);  

              // console.log("获取文件的后缀",blob.type);  
              var newImageData = canvas.toDataURL(blob.type, quality);  
              var byteString = atob(newImageData.split(',')[1]);  
              var mimeString = newImageData.split(',')[0].split(':')[1].split(';')[0];  
              var ab = new ArrayBuffer(byteString.length);  
              var ia = new Uint8Array(ab);  
              for (var i = 0; i < byteString.length; i++) {  
                ia[i] = byteString.charCodeAt(i);  
              }  
              var newFile = new Blob([ab], { type: mimeString });  
              console.log(newFile);  
              var newFilePath = URL.createObjectURL(newFile);  
              callback(newFilePath);  
            };  
            img.src = reader.result;  
          };  
          reader.readAsDataURL(blob);  
        }  
      };  
      xhr.send();  
    },