ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【uniapp】多图上传,兼容H5、APP

2021-10-19 10:02:29  阅读:183  来源: 互联网

标签:uniapp floder tempFilePaths APP H5 res uni hideLoading 上传


多图上传

// tempFilePaths:需要上传的图片
// uploadUrl:上传地址,(必须传入全地址,例:https://xxxx.com/xxx/xxx/upload;不能使用字符串
// 拼接形式,例:this.$api.baseUrl + '/xxx/xx/upload',否则H5上传不兼容;)
// floder:传入服务器文件夹名称
//
uploadImgsFn = (tempFilePaths, uploadUrl, floder) => {
	let that = this
	return new Promise((presolve, preject) => {
		if ({}.toString.call(tempFilePaths) != '[object Array]') {
			throw new TypeError(`上传图片参数 tempFilePaths 类型错误!`)
		}
		//路径数组为空时  不上传
		if (tempFilePaths.length == 0) {
			presolve([])
			return
		}
		uni.showLoading({
			title: '上传图片中...',
			mask: true
		});
		let uploads = []
		tempFilePaths.forEach((item, i) => {
			uploads[i] = new Promise((resolve) => {
				uni.uploadFile({
					url: uploadUrl,
					name: 'file',
					filePath: item,
					formData: {
						"folder": floder || "recruitment_img"
					},
					success(res) {
						resolve(JSON.parse(res.data).data)
					},
					fail(err) {
						uni.hideLoading()
					}
				})
				
			})
		})

		Promise.all(uploads).then(res => {
			//图片上传完成
			presolve(res)
			uni.hideLoading()
		}).catch(err => {
			preject(err)
			uni.hideLoading()
			uni.showToast({
				title: '上传失败请重试',
				icon: 'none'
			})
		})
	})
}

标签:uniapp,floder,tempFilePaths,APP,H5,res,uni,hideLoading,上传
来源: https://blog.csdn.net/jastalented/article/details/120840278

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有