1***@163.com
1***@163.com
  • 发布:2024-08-30 14:27
  • 更新:2024-09-02 13:56
  • 阅读:233

【报Bug】uni.uploadFile使用files上传文件,文件参数丢失

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22H2 19045.4780

HBuilderX类型: 正式

HBuilderX版本号: 4.24

浏览器平台: Edge

项目创建方式: HBuilderX

示例代码:
function chooseAvatar() {  
    uni.chooseImage({  
        count: 1, //默认9  
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有  
        sourceType: ['album'], //从相册选择  
        success: res => {  
            iconFile.value = res.tempFiles[0]  
        }  
    });  
}  

function chooseBackground() {  
    uni.chooseImage({  
        count: 1, //默认9  
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有  
        sourceType: ['album'], //从相册选择  
        success: res => {  
            backgroundFile.value = res.tempFiles[0]  
        }  
    });  
}  

const iconFile = ref<any>()  
const backgroundFile = ref<any>()  
const circleInfo = ref<CircleParam>({  
    description: "默认圈子",  
    title: "默认圈子",  
    parentId: "11111"  
})  

function sub() {  
    if (!hasToken()) {  
        // token无效  
        uni.navigateTo({  
            url: '/pages/auth/auth'  
        })  
        return  
    }  
    createCircle(circleInfo.value, [iconFile, backgroundFile]).then(res => {  
        toast("申请圈子分类成功,等待管理员审核")  
    })  
}  

export function createCircle(data: any, files: any[]) {  
  // 用户添加二级分类发送请求  
  return postForm("/circle/create", data, files);  
}  

export const postForm = (url: string, formData: AnyObject, files: any): Promise<Result> => {  
  const header = {authentication: uni.getStorageSync('authentication')}  
  return new Promise((resolve, reject) => {  
    uni.showLoading({title: '加载中', mask: true}).then()  
    setTimeout(() => {  
      uni.hideLoading()  
    }, 5000)  
    debugger  
    uni.uploadFile({  
      url: baseUrl + url,  
      files: files,  
      formData: formData,  
      header: header,  
      success: (res: UploadFileSuccessCallbackResult) => {  
        console.log(res)  
      },  
      fail: (err: GeneralCallbackResult) => {  
        uni.showToast({  
          title: err.errMsg,  
          icon: "none"  
        }).then()  
        reject(err)  
      },  
      complete: () => {  
        uni.hideLoading()  
      },  
    })  
  })  
}  

@Getter  
@Setter  
@Schema(name = "TbCircleDTO", description = "圈子DTO")  
public class TbCircleDTO implements Serializable {  

    @Schema(description = "父id")  
    @NotBlank(message = "请选择父圈子")  
    private String parentId;  

    @Schema(description = "标题")  
    @NotBlank(message = "标题不能为空")  
    @JsonDeserialize(using = SensitiveWordDeserializer.class)  
    private String title;  

    @Schema(description = "图标链接")  
    @NotNull(message = "请上传头像和背景图")  
    @Size(min = 2, max = 2, message = "请上传头像和背景图")  
    private MultipartFile[] file;  

    @Schema(description = "圈子简介")  
    @NotBlank(message = "简介不能为空")  
    @JsonDeserialize(using = SensitiveWordDeserializer.class)  
    private String description;  

}  

    @Operation(description = "创建圈子")  
    @LoginUser  
    @PostMapping("/create")  
    public Response<String> create(@Validated TbCircleDTO param) {  
        return this.circleManage.create(param);  
    }  

    public TbStorageVO store(MultipartFile file) {  
        String fileName = file.getOriginalFilename();  
        AssertUtil.isEmpty(fileName, "文件参数异常,上传失败");  
        String contentType = file.getContentType();  
        String extensionName;  
        String after = StrUtil.subAfter(file.getOriginalFilename(), "/", true);  
        try {  
            // uniapp文件上传会导致文件后缀名丢失,而且也存在人为修改请求后缀的问题,靠文件流识别文件类型  
            extensionName = FileTypeUtil.getType(file.getInputStream());  
        } catch (IOException e) {  
            throw new ServiceException("文件格式异常");  
        }  
        String ossKey = this.getFilePath(extensionName);  
//        try {  
//            this.storage.store(file.getInputStream(), file.getSize(), file.getContentType(), ossKey);  
//        } catch (IOException e) {  
//            log.error("{}文件上传失败", active, e);  
//            throw new ServiceException("文件上传失败");  
//        }  
        TbStorage tbStorage = new TbStorage();  
        tbStorage.setFileKey(ossKey);  
        tbStorage.setFileName(file.getOriginalFilename());  
        tbStorage.setSize(file.getSize());  
        tbStorage.setExtensionName(extensionName);  
        this.tbStorageService.save(tbStorage);  
        return OrikaUtil.transform(tbStorage, TbStorageVO.class);  
    }  

操作步骤:

获取到文件之后 调用postForm 方法

预期结果:

后端可以获取到文件名称

实际结果:

获取到的信息全是错误的

bug描述:

uni.uploadFile使用files上传文件,后端获取不到原始文件名称、文件contentType;包括使用文件头去获取文件类型也获取不到
除了能拿到文件是真的,文件名称也被改了,随机字符串,后缀也丢了
不只是edge,微信内置也是,safari也是,不知道你们上传之前对文件进行了怎么样的处理

2024-08-30 14:27 负责人:无 分享
已邀请:
DCloud_UNI_yuhe

DCloud_UNI_yuhe

你好,请你检查一下网络请求,看一下是否后端有问题。

套马杆的套子

套马杆的套子 - 没有解决不了的问题,只有解决不完的问题

这样试试

@PostMapping("/test")    
    public void test( String address, HttpServletRequest request){    
        MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;    
        MultiValueMap<String, MultipartFile> multiFileMap = req.getMultiFileMap();    
        List<MultipartFile> fileList=new ArrayList<>();    
        multiFileMap.forEach((key, value) -> {    
            MultipartFile multipartFile= value.get(0);    
            fileList.add(multipartFile);    
        });    
    }

要回复问题请先登录注册