uniapp上传图片、视频-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp上传图片、视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。
如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。另外选择和上传非图像、视频文件参考：uni-app 选择和上传非图像、视频文件 - DCloud问答。

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

推荐开发者使用更好的APIuniCloud.uploadFile，uniCloud提供了免费CDN和更好的易用性，包括安全的cdn直传。详见：概述 | uni-app官网

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。
timeout	Number	否	超时时间，单位 ms	H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
formData	Object	否	HTTP 请求中其他额外的 form data
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

注意：

App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
hello uni-app中的客服反馈，支持多图上传。uni-app插件市场中也有多个封装的组件。
App平台选择和上传非图像、视频文件，参考uni-app 选择和上传非图像、视频文件 - DCloud问答
网络请求的 超时时间 可以统一在 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 状态码

示例文章来源地址https://www.toymoban.com/news/detail-727235.html

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

返回值

如果希望返回一个 uploadTask 对象，需要至少传入 success / fail / complete 参数中的一个。例如：

var uploadTask = uni.uploadFile({
    url: 'https://www.example.com/upload', //仅为示例，并非真实接口地址。
    complete: ()=> {}
});
uploadTask.abort();

如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象：Promise 封装

通过 uploadTask，可监听上传进度变化事件，以及取消上传任务。

uploadTask 对象的方法列表

方法	参数	说明
abort		中断上传任务
onProgressUpdate	callback	监听上传进度变化
onHeadersReceived	callback	监听 HTTP Response Header 事件。会比请求完成事件更早,仅`微信小程序平台`支持，规范详情
offProgressUpdate	callback	取消监听上传进度变化事件，仅`微信小程序平台`支持，规范详情
offHeadersReceived	callback	取消监听 HTTP Response Header 事件，仅`微信小程序平台`支持，规范详情

onProgressUpdate 返回参数说明

参数	类型	说明
progress	Number	上传进度百分比
totalBytesSent	Number	已经上传的数据长度，单位 Bytes
totalBytesExpectedToSend	Number	预期需要上传的数据总长度，单位 Bytes

示例

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

        uploadTask.onProgressUpdate((res) => {
            console.log('上传进度' + res.progress);
            console.log('已经上传的数据长度' + res.totalBytesSent);
            console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

            // 测试条件，取消上传任务。
            if (res.progress > 50) {
                uploadTask.abort();
            }
        });
    }
});

到了这里，关于uniapp上传图片、视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！