路径资源统一处理、加工、拼接方法

1、不知道大家有没有遇到同样的问题，后台接口传来的图片资源有带http的资源前缀，也有三方库返回的不带http资源前缀，而且后台换一次人，多张图片资源有传字符串用逗号分隔的，也有用数组格式传的，而且多张图片同样有带http，也有不带http的，且该问题往后上传的图片同样存在这个问题（原因是移动端和后台管理传的时候没做统一），之前同事简单封装老出问题，后来自己重写方法，方法如下：
2、注意事项：该方法如果在html部分调用，可能会出现在imgUrl资源加载完成之前调用，就会执行最后else部分console.log(‘函数urlProcessingW未传入任何参数’)，等imgUrl资源加载完成即再次执行可正常显示，
3、该方法可接收字符串类型或者数组类型，默认返回数组，
4、路径资源若是字符串类型有逗号且返回类型不是arr，时需要自己补充了。

const baseUrlW = 'http://xxxxx.com';
const urlProcessingW = function(imgUrl, backType = 'arr') {// backType 为可选参数，函数返回数据的数据格式
	if(imgUrl !== undefined) {
		//类型为字符串且不为空
		if(typeof(imgUrl) === 'string' && imgUrl !== '') {
			//字符串中有，号
			if(imgUrl.indexOf(',') !== -1) {
				//有逗号且返回类型为arr （默认或传来）
				if(backType === 'arr') {
					return imgUrl.split(',').map((url) => {
						if(url.indexOf('http') !== -1) {
							return url
						}else {
							return baseUrlW + url
						}
					})
				//有逗号且返回类型不是arr，想要啥格式自己补吧
				}else {}
			//没有，号
			}else {
				//没有，号且返回类型为arr
				if(backType === 'arr') {
					//是否有http头
					if(imgUrl.indexOf('http') !== -1) {
						return imgUrl.split(',')
					}else {
						return (baseUrlW + imgUrl).split(',')
					}
				}else {
					return imgUrl.indexOf('http') !== -1 ? imgUrl : baseUrlW + imgUrl
				}
			}
		//imgUrl 为数组
		}else if(Array.isArray(imgUrl) && imgUrl.length !== 0){
			return imgUrl.map((url) => {
				if(url.indexOf('http') !== -1) {
					return url
				}else {
					return baseUrlW + url
				}
			})
		}else {
			//除字符串及数组类型处理可在此进行
		}
	}else {
		console.log('函数urlProcessingW未传入任何参数')
	}
}

标签：arr,http,加工,url,路径,else,拼接,return,imgUrl
来源： https://blog.csdn.net/weixin_45440813/article/details/114980903