uni-app uni.uploadFile使用files上传文件时文件参数丢失

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app uni.uploadFile使用files上传文件时文件参数丢失

开发环境 版本号 项目创建方式
Windows 22H2 19045.4780 HBuilderX

产品分类：uniapp/H5

浏览器平台：Edge

示例代码：

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()  
      },  
    })  
  })  
}

操作步骤：

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

预期结果：

后端可以获取到文件名称

实际结果：

获取到的信息全是错误的

bug描述：

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


Harmonyos Next教程
3 回复

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


这样试试 @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);
});
}

在uni-app中使用uni.uploadFile进行文件上传时，如果遇到文件参数丢失的问题，通常是由于参数配置不正确或文件数据没有正确传递到服务器导致的。以下是一个使用uni.uploadFile上传文件的示例代码，确保文件参数能够正确传递：

// 假设我们有一个文件选择器，用户选择文件后触发上传
<template>
  <view>
    <button @click="chooseFile">选择文件上传</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filePath: '' // 保存选择的文件路径
    };
  },
  methods: {
    chooseFile() {
      uni.chooseFile({
        count: 1, // 允许选择的文件数量
        success: (res) => {
          const tempFilePaths = res.tempFiles;
          if (tempFilePaths.length > 0) {
            this.filePath = tempFilePaths[0].path;
            this.uploadFile();
          } else {
            console.error('未选择文件');
          }
        },
        fail: (err) => {
          console.error('选择文件失败', err);
        }
      });
    },
    uploadFile() {
      if (!this.filePath) {
        console.error('文件路径为空');
        return;
      }

      uni.uploadFile({
        url: 'https://your-server-url/upload', // 替换为你的服务器上传接口
        filePath: this.filePath,
        name: 'file', // 服务端接收文件的参数名，确保与后端接口一致
        formData: {
          user: 'testUser', // 其他表单数据，如用户信息
          token: 'your-auth-token' // 认证token或其他必要参数
        },
        success: (uploadFileRes) => {
          const data = uploadFileRes.data; // 服务器返回的数据
          try {
            const response = JSON.parse(data);
            console.log('上传成功', response);
          } catch (e) {
            console.error('解析服务器响应失败', e);
          }
        },
        fail: (err) => {
          console.error('上传失败', err);
        }
      });
    }
  }
};
</script>

在这个示例中，我们使用了uni.chooseFile来选择文件，并在选择成功后调用uni.uploadFile进行上传。注意以下几点：

  1. filePath：确保文件路径正确。
  2. name：这个参数指定了文件在请求中的字段名，必须与服务器端接收文件的参数名一致。
  3. formData：可以添加其他表单数据，如用户信息或认证token。

确保服务器端能够正确解析请求中的文件和其他表单数据。如果问题依然存在，建议检查服务器端的日志，看是否有关于文件接收的错误信息，或者检查请求是否因网络问题未能完整发送。

回到顶部