uni-app 上传文件

Api 接口

uni.uploadFile(OBJECT)

参数说明

参数名 类型 必填 说明 平台差异说明
url String 开发者服务器 url
files Array 需要上传的文件列表。 使用 files 时,filePath 和 name 不生效。 App、H5( 2.6.15+)
fileType String 见平台差异说明 文件类型,image/video/audio 仅支付宝小程序,且必填。
file File 要上传的文件对象。 仅H5(2.6.15+)支持
filePath String 要上传文件资源的路径。
name String 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
header Object HTTP 请求 Header, header 中不能设置 Referer。
formData Object HTTP 请求中其他额外的 form data
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)  

注意:

  • App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
  • hello uni-app中的客服反馈,支持多图上传。uni-app插件市场中也有多个封装的组件。
  • App平台选择和上传非图像、视频文件,参考https://ask.dcloud.net.cn/article/35547
  • 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
  • 支付宝小程序开发工具上传文件返回的http状态码为字符串形式,支付宝小程序真机返回的状态码为数字形式

files参数说明

files 参数是一个 file 对象的数组,file 对象的结构如下:

参数名 类型 必填 说明
name String multipart 提交时,表单的项目名,默认为 file
file File 要上传的文件对象,仅H5(2.6.15+)支持
uri String 文件的本地地址

Tip:

如果 name 不填或填的值相同,可能导致服务端读取文件时只能读取到一个文件。

success 返回参数说明

参数 类型 说明
data String 开发者服务器返回的数据
statusCode Number 开发者服务器返回的 HTTP 状态码

代码示例

uni.chooseImage({
    success: (chooseImageRes) => {
        const tempFilePaths = chooseImageRes.tempFilePaths;
        uni.uploadFile({
            url: 'https://www.pangugle.com/uploadFile', //仅为示例,非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
                'user': 'test'
            },
            success: (uploadFileRes) => {
                console.log(uploadFileRes.data);
            }
        });
    }
});

服务端上传文件代码

spring boot 上传文件

上传图片需要压缩图片