uni.uploadFile上传文件

最新推荐文章于 2025-06-04 16:44:57 发布

原创最新推荐文章于 2025-06-04 16:44:57 发布 · 1.3w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #nodejs #uni-app

本文探讨了前端如何处理nobounry、fileisnotpresent和multipart解析错误，通过调整`u-upload`配置、设置正确header及避免指定Content-Type来解决上传问题，详细介绍了使用`uni.uploadFile`的示例和关键参数设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、遇到问题

需求就是上传之前要在去请求一个识别图片的。所以需要手动上传图片，但是有以下问题

1.no bounry

2.file is not present

3.Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http

最后导致上传失败。

然后刚开始看别人写的，结果不行。后来研究了一波。用下面的方式可以

<u-upload ref="uUpload5" :action="define.baseURL+'/api/changepower/ocr/v1/vehicleLicense'"
	max-count="1" :file-list="fileList5" @on-success="upload5" :header="uploadHeaders" :before-upload="beforeUpload"></u-upload>

首先是header 是token信息，一个上传前的钩子函数，文件列表展示用

2.我在上传之前的事件注意别填写 content-type 和 formdata

async beforeUpload(index, list) {
    uni.uploadFile({
        url: this.define.baseURL+'/api/file/Uploader/annexpic',
		filePath: list[0].url,
		name: 'file', //后台接收字段名
	   // formData:{formData},
		header: {
		   // "Content-Type": "multipart/form-data",
			...this.uploadHeaders
		},
		success: (res) => {
			console.log('请求成功_______________', res)
		},
		fail: (err) => {
			console.log('请求error_______________', err)
		}
	})

}

url是后端的接口

filepath直接用回调参数即可,

name:默认是file。如果后端接收文件名字不一样，则要更换

header:需要填写你的token等信息。