其他分享
首页 > 其他分享> > 【uniapp】多图上传,兼容H5、APP

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

作者:互联网

多图上传

// 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