uni.uploadFile单文件上传、多文件上传

文章描述了一种使用uni-app框架实现的文件上传方法,通过`uploadall`函数,将多个临时文件路径和FormData发送到指定接口,利用Promise.all进行并发上传,并处理上传成功和失败的情况。
摘要由CSDN通过智能技术生成
// 上传文件到接口 url(接口路径)header(请求头)filePath(文件临时路径数组 item为具体临时路径)  formData 其他参数 name 参数名称
const uploadall = (url, header,filePath, formData, name) => {
	uni.showToast({
		icon: 'loading',
		title: `正在上传`,
		duration: 20000
	})
	return new Promise((resol, rejec) => {
		// 定义Promise集合
		const pList = [];
		let Header = {
			...header,
			"Content-Type": 'multipart/form-data' // 设置请求头为 multipart/form-data
		}
		let formDatafrom = {
			userid: uni.getStorageSync('userid') || '',
			from: process.env.UNI_FROM,
			...formData
		}
		let data = {
			name,
			formData: formDatafrom,
		}
		const requesturl = url ? url : '默认的接口路径' // url为其他接口的路径 这里是为了适配多接口的文件上传
		filePath.forEach((item, index) => {
			// 多文件上传需要借助Promise.all的执行力,所以利用Promise封装上传功能
			const p = new Promise((resolve, reject) => {

				uni.uploadFile({
					url: process.env.UNI_BASE_URL + requesturl, // process.env.UNI_BASE_URL为接口域名地址 不知道怎么配置的话你也可以直接写死,如:'https://xxxxx.com'
					filePath: item,
					...data,
					header: Header,
					success: (uploadFileRes) => {
						const res = JSON.parse(uploadFileRes.data) // uploadFile返回的数据格式为json格式,所以需要转换成一下
						resolve(res)
					},
					fail: (error) => {
						uni.showToast({
							duration: 2000,
							icon: process.env.UNI_ERROR,
							title: `上传失败`
						})
						reject(error)
					}
				});

			})
			pList.push(p);
		})
		const imgurls = []  // 这个是接口返回的数据,因为我们接口直接返回的就是文件的线上地址所以我这边在下面直接添加到数组每一项了
		Promise.allSettled(pList).then(function(results) {
			// 所有上传任务执行成功,results中包含了所有上传成功后响应的数据
			console.log(results)
			if (url) {
				resol(results[0].value)
			} else {
				results.forEach((item) => {
					if (item.value && item.value.result == 'ok') {
						imgurls.push(item.value.imageurl)
					} else {
						if (!storeindex.getters.cheackimgmessage || storeindex.getters
							.cheackimgmessage != '没有人脸')
							storeindex.commit('setcheackimgmessageInc', item.value
								.message || '')
					}
				})
				uni.hideToast()
				resol(imgurls)
			}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值