uniapp小程序上传单张/多张照片到服务器(封装方法)

这篇具有很好参考价值的文章主要介绍了uniapp小程序上传单张/多张照片到服务器(封装方法)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp上传单张/多张照片到服务器(封装方法)

//operate.js文件内容
//export const api = 'http://192.168.0.7:8080/'
import {
	api
} from '@/utils/operate.js'
/*
 * @param config:{
 * 	url - uni.uploadFile { url } 文件请求接口路径 as String
 * 	filePath - uni.uploadFile { filePath } 文件路径 as String
 * 	name - uni.uploadFile { name } as String
 * 	header - uni.uploadFile { header } 自定义请求头 as Object
 * 	showToast - uni.uploadFile { showToast } 是否显示请求结果 as Boolean
 * }
 */
 //封装上传单个图片
export const uploadFile = (config = {}) => {
	const {
		url = `${api}/app/upload/image`,
			filePath = null,
			name = 'file',
			header = {
				"Content-Type": "multipart/form-data",
			},
			showToast = true
	} = config
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			url, //文件服务器地址
			filePath, //文件路径
			name,
			header,
			success(res) {
				showToast && uni.showToast({
					title: '上传成功',
					icon: "none"
				});
				resolve(JSON.parse(res.data))
			},
			fail(err) {
				showToast && uni.showToast({
					title: '上传失败',
					icon: "none"
				});
				reject(err)
			}
		});
	})
}

 //封装上传多张图片
 /*
 * @param config:{
 * 	urls - 文件请求列表 [String,String...] as Array
 * 	showOnlyOrBatch - 'Only' | 'Batch' | 'All' | 'None' 显示提示类型 as String
 * }
 */
export const uploadFileMore = (config = {}) => {
	const {
		urls = [],
			showOnlyOrBatch = 'Only'
	} = config
	let fileIndex = 0;
	let successList = []
	return new Promise((resolve, reject) => {
		(function uploadFileFun() {
			uploadFile({
				filePath: urls[fileIndex].url,
				showToast: false
			}).then(res => {
				if (showOnlyOrBatch != 'None' && (showOnlyOrBatch == 'Only' ||
						showOnlyOrBatch == 'All')) {
					uni.showToast({
						title: `正在上传: ${fileIndex+1}/${urls.length}`,
						icon: "none"
					})
				}
				fileIndex += 1
				successList.push(res.data)
				if (fileIndex > urls.length - 1) {
					fileIndex = 0
					if (showOnlyOrBatch != 'None' && (showOnlyOrBatch == 'Batch' ||
							showOnlyOrBatch == 'All')) {
						uni.showToast({
							title: '批量上传成功',
							icon: "none"
						})
					}
					resolve(successList)
					return
				}
				setTimeout(() => {
					uploadFileFun(urls)
				}, 1000)
			}).catch((error) => {
				console.log('error', error);
				fileIndex = 0
				uni.showToast({
					title: '批量上传失败',
					icon: "none"
				});
				reject(false)
			})
		})()
	})
}






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

到了这里,关于uniapp小程序上传单张/多张照片到服务器(封装方法)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包