图片上传组件0.0.5

src/components/upload/index.js

+import uploader from '@/plugins/uploader/index.js'
+const globalUrl = process.uniEnv || {}
+export default {
+	name: 'qiniup',
+	components: {},
+	data() {
+		return {
+			domain: 'http://upload.qiniup.com', // 七牛上传域名地址
+			uptokenURL: globalUrl.ucenterUrl.apiUrl + '/v1/tokens', // 上传token地址
+			files:[], // 上传文件
+			fileMaps:[], // 上传文件返回对象
+			keys:[], // 七牛返回key
+			uploadToken: '', // 上传token
+			maximum:999, // 最大上传数量
+			qiniuOptions: {}, // 七牛上传配置
+		};
+	},
+	created() {
+		console.log(uploader,'uploader')
+		// this.initQiniu()
+	},
+	methods: {
+		async chooseImage(){
+			let res = await uploader.qnImgUpload()
+			console.log(res,'res--------qnImgUpload')
+		},
+		initQiniu: function() {
+			var defaulfs = {
+				// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
+				region: 'ECN',
+				bucket: 'fa-cms',
+				qiniuBucketURLPrefix: 'uploads',
+				// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
+				// 由其他程序生成七牛云uptoken，然后直接写入uptoken
+				uptoken: '',
+				// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
+				uptokenURL: this.uptokenURL,
+				// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
+				uptokenFunc: function() {
+			
+				},
+				// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
+				domain: this.domain,
+				// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
+				// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
+				// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
+				// 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
+				shouldUseQiniuFileName: true
+			};
+			
+			let options = {}
+			if(Object.keys(this.qiniuOptions).length) {
+				Object.assign(options, defaulfs, this.qiniuOptions);
+			} else {
+				options = defaulfs;
+			}
+			
+			// 将七牛云相关配置初始化进本sdk
+			qiniuUploader.init(options);
+		},
+		
+		getUrlKey(file) {
+			let index = file.lastIndexOf('/');
+			let len = file.length
+			let name = file.substring(index + 1, len)
+			return name;
+		},
+		
+		/**
+		* 确认上传
+		* @param {boolean} submit
+		 */
+		confirmUpload(submit = false) {
+			let self = this
+			const fileList = self.files
+			if (self.maximum - fileList.length <= 0) {
+				uni.showToast({
+					title: '图片数量不能大于' + self.maximum,
+					icon: 'none'
+				})
+				return
+			}
+			for (let file of fileList) {
+				let name = self.getUrlKey(file)
+				// 交给七牛上传
+				let item = {
+					src: '',
+					id: '',
+					key:'',
+					// filesize: '',
+					progress: 0
+				}
+				const params = {
+					name:name,
+					file:file,
+				}
+				
+				qiniuUploader.upload(params, (res) => {
+					console.log(res,'res')
+					let inLen = self.maximum - fileList.length
+					if (inLen > 0) {
+						item.src = file
+						item.key = res.key || res.src
+						self.fileMaps.push(item);
+						self.keys.push(item.key)
+						if(submit) {
+							self.submitFile()
+						}
+					} else {
+						uni.showToast({
+							title: '图片数量不能大于9'
+						})
+					}
+				}, (error) => {
+					console.log('error: ' + error);
+				}, null, (res) => {
+					item.progress = res.progress
+				}, () => {
+					// 取消上传
+				}, () => {
+					// `before` 上传前执行的操作
+				}, (err) => {
+					// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
+				});
+			}
+		}
+	}
+}

src/pages/settle/file-upload - 副本.vue

+<template>
+	<view class="img-wrap rel">
+		<view class="upload-box">
+			<view class="img-item pic" v-for="(file,index) in imgList" >
+<!-- 				<view class="tip-sucess u-flex u-row-center" v-if="file && (file.status == status.QUEUED || file.status == status.UPLOADING)">
+					<span>正在上传中...{{file.percent}}%</span>
+				</view> -->
+				<img :src="file.src" mode="aspectFill" @click="perviewImg(index)">
+				<view class="close"  @click="removeImg(index)">
+					<u-icon name="close" color="#fff" size="20"></u-icon>
+				</view>
+				
+			</view>
+			<view>
+				<view class="pic upload"  @click="chooseImage">
+					<u-icon name="camera" color="#fff" size="100"></u-icon>
+					<span class="txt">点击拍摄</span>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import base from '@/components/upload/upload';
+	export default {
+		mixins:[base],
+		data() {
+			return {
+				initImgList:[],
+				currentIndex: 0,
+				uploadType: '',
+				pageTitle:''
+			}
+		},
+		computed: {
+			
+		},
+		onLoad(option) {
+			this.initPage(option)
+			// this.initworkingAgeList();
+			// this.getareaList()
+		},
+		beforeDestroy(){
+			this.setPrevPageData()
+		},
+		methods: {
+			goBack(type) {
+				// if (type) {
+				// 	this.setPrevPageData()
+				// }
+				this.setPrevPageData()
+				uni.navigateBack({
+					delta: 2
+				});
+			},
+			initPage(option) {
+				const uploadType = option.uploadType
+				
+				this.uploadType = uploadType
+				let pages = getCurrentPages()
+				if (pages.length < 2) {
+					return
+				}
+				let prevVue = pages[pages.length - 2].$vm 
+				this.imgList = prevVue.imgObj[uploadType] || []
+				const formShowList = prevVue.formShowList
+				formShowList.map(item=>{
+					if(item.filedName===uploadType){
+						this.pageTitle = item.label || '图片上传'
+					}
+				})
+				if(this.uploadType!=='other_certificates'){
+					this.selectNum = 1
+				}
+				uni.setNavigationBarTitle({
+					title: this.pageTitle
+				});
+			},
+			setPrevPageData() {
+				let pages = getCurrentPages()
+				if (pages.length < 2) {
+					return
+				}
+				let selected = this.selected
+				let prevVue = pages[pages.length - 2].$vm
+				const uploadType = this.uploadType
+				prevVue.imgObj[uploadType] = this.imgList
+			},
+			initworkingAgeList() {
+				let list = [{
+					value: 0,
+					name: "1年内",
+				}, ];
+				for (let i = 1; i < 10; i++) {
+					const item = {
+						value: i,
+						name: i + "年",
+					};
+					list.push(item);
+				}
+				list.push({
+					value: 10,
+					name: "10年+",
+				});
+				this.workingAgeList = list;
+			},
+			getareaList(code, level, provinceIndex) {
+				provinceIndex = provinceIndex || 0
+				this.currentIndex = provinceIndex
+				let areaList = this.areaList
+				if (level) {
+					if (areaList[provinceIndex].children) {
+						return
+					}
+				}
+				uni.showLoading({
+					title: '加载中'
+				});
+				let params = {
+					type: '充电桩安装',
+					level: level || 0,
+					code: code
+				}
+				const res = this.$u.api.getSettleArea(params)
+				uni.hideLoading()
+				if (res.status != 200) {
+					return;
+				}
+				if (!level) {
+					this.areaList = res.data
+					const parmas = [res.data[0].id, 1]
+					this.getareaList(...parmas)
+				} else {
+					this.$set(areaList[provinceIndex], 'children', res.data)
+				}
+			},
+			selectAge(item) {
+				this.selected.working_age = item.value
+				this.selected.workingAgeTxt = item.name
+			},
+			selectArea(areaItem) {
+				const code = areaItem.id
+				const selected = this.selected
+				const idx = selected.areaIds.indexOf(code)
+				const currentProvince = this.areaList[this.currentIndex]
+				let txt = currentProvince.name + '-' + areaItem.name
+				if (idx >= 0) {
+					selected.areaTxts.splice(idx, 1)
+					selected.areaIds.splice(idx, 1)
+				} else {
+					selected.areaIds.push(code)
+					selected.areaTxts.push(txt)
+				}
+				this.selected = selected
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.upload-box {
+		padding: 30rpx 16rpx;
+
+		.pic {
+			position: relative;
+			display: block;
+			width: 720rpx;
+			height: 450rpx;
+			// overflow: hidden;
+			border-radius: 12rpx;
+			margin-bottom: 30rpx;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.pic.upload {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+
+			img {
+				display: block;
+				width: 60rpx;
+				height: 52rpx;
+			}
+
+			.txt {
+				font-weight: bold;
+				margin-top: 18rpx;
+				font-size: 32rpx;
+				color: #fff;
+
+				&.iconfont {
+					font-size: 60rpx;
+				}
+			}
+
+			background-color: rgba(0, 0, 0, 0.3);
+		}
+	}
+	.close{
+		position: absolute;
+		width:50rpx;
+		height:50rpx;
+		right:0;
+		top:0;
+		text-align: center;
+		line-height:50rpx;
+		border-radius: 50%;
+		background: red;
+		color: #fff;
+	}
+	.tip-sucess {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		padding: 20rpx 0;
+		width: 100%;
+		z-index: 5;
+		background: rgba(0, 0, 0, .4);
+		border-radius: 0;
+		color: #fff;
+		font-size: 28rpx;
+
+		&.tip-fail i {
+			background: red;
+		}
+
+		i {
+			margin-right: 12rpx;
+			width: 50rpx;
+			height: 50rpx;
+			background: #7fbe4c;
+			border-radius: 50%;
+			text-align: center;
+			line-height: 50rpx;
+			font-size: 24rpx;
+		}
+	}
+</style>

src/pages/settle/file-upload.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-	import base from '@/components/upload/upload';
+	import base from '@/components/upload/index';
 	export default {
 		mixins:[base],
 		data() {

src/plugins/uploader/index.js

+import request from "./request";
+const globalUrl = process.uniEnv || {}
+let baseOptions = {
+	baseUrl: '', // 接口请求地址，用于图片上传域名配置
+	//服务器本地上传文件地址
+	fileUrl: '',
+	defaultUploadUrl: "api/common/v1/upload_image", // 服务器上传图片默认url
+	qiniuUploadUrl: globalUrl.ucenterUrl.apiUrl + '/v1/tokens',
+	//设置请求头（如果使用报错跨域问题，可能是content-type请求类型和后台那边设置的不一致）
+	header: {
+		'content-type': 'application/json;charset=UTF-8'
+	},
+	// 请求超时时间（默认6000）
+	timeout: 6000,
+	// 默认配置（可不写）
+	config: {
+		// 是否自动提示错误
+		isPrompt: true,
+		// 是否显示加载动画
+		load: true,
+		// 是否使用数据工厂
+		isFactory: true
+	}
+}
+
+//可以new多个request来支持多个域名请求
+let uploader = new request(baseOptions);
+
+// 添加获取七牛云token的方法
+uploader.getQnToken = function(callback) {
+	//该地址需要开发者自行配置（每个后台的接口风格都不一样）
+	// console.log(uploader.get,'uploader.get')
+	uploader.post(baseOptions.qiniuUploadUrl).then(data => {
+		/*
+		 *接口返回参数：
+		 *visitPrefix:访问文件的域名
+		 *token:七牛云上传token
+		 *folderPath:上传的文件夹
+		 *region: 地区 默认为：ECN
+		 */
+		callback({
+			visitPrefix: data.visitPrefix || '',
+			token: data.token || '',
+			folderPath: data.folderPath || '',
+			region: "ECN"
+		});
+	});
+}
+
+//当前接口请求数
+let requestNum = 0;
+//请求开始拦截器
+uploader.requestStart = function(options) {
+	if (options.load) {
+		if (requestNum <= 0) {
+			//打开加载动画
+			uni.showLoading({
+				title: '加载中',
+				mask: true
+			});
+		}
+		requestNum += 1;
+	}
+	// 图片上传大小限制
+	if (options.method == "FILE" && options.maxSize) {
+		// 文件最大字节: options.maxSize 可以在调用方法的时候加入参数
+		const maxSize = options.maxSize;
+		for (let item of options.files) {
+			if (item.size > maxSize) {
+				setTimeout(() => {
+					uni.showToast({
+						title: "图片过大，请重新上传",
+						icon: "none"
+					});
+				}, 500);
+				return false;
+			}
+		}
+	}
+	//请求前加入token
+	options.header['token'] = "RTOKENf7d46ea33a7923515abfa779e04eccba77f98604"; //项目 token
+	return options; // return false 表示请求拦截，不会继续请求
+}
+//请求结束
+uploader.requestEnd = function(options) {
+	//判断当前接口是否需要加载动画
+	if (options.load) {
+		requestNum = requestNum - 1;
+		if (requestNum <= 0) {
+			uni.hideLoading();
+		}
+	}
+}
+//登录弹窗次数
+let loginPopupNum = 0;
+//所有接口数据处理（可在接口里设置不调用此方法）
+//此方法需要开发者根据各自的接口返回类型修改，以下只是模板
+uploader.dataFactory = async function(res) {
+	console.log("接口请求数据", {
+		url: res.url,
+		resolve: res.response,
+		header: res.header,
+		data: res.data,
+		method: res.method,
+	});
+	if (res.response.statusCode && res.response.statusCode == 200) {
+		// let httpData = res.response.data;
+		let httpData = res.response;
+		if (typeof(httpData) == "string") {
+			httpData = JSON.parse(httpData);
+		}
+		/*********以下只是模板(及共参考)，需要开发者根据各自的接口返回类型修改*********/
+		console.log(httpData, 'httpData')
+		//判断数据是否请求成功
+		if (httpData.statusCode === 200) {
+			// 返回正确的结果(then接受数据)
+			return Promise.resolve(httpData.data);
+		} else if (httpData.code == "1000" || httpData.code == "1001" || httpData.code == 1100) {
+			let content = '此时此刻需要您登录喔~';
+			if (loginPopupNum <= 0) {
+				loginPopupNum++;
+				uni.showModal({
+					title: '温馨提示',
+					content: content,
+					confirmText: "去登录",
+					cancelText: "再逛会",
+					success: function(res) {
+						loginPopupNum--;
+						if (res.confirm) {
+							uni.navigateTo({
+								url: "/pages/user/login"
+							});
+						}
+					}
+				});
+			}
+			// 返回错误的结果(catch接受数据)
+			return Promise.reject({
+				statusCode: 0,
+				errMsg: "【request】" + (httpData.info || httpData.msg)
+			});
+		} else { //其他错误提示
+			if (res.isPrompt) {
+				uni.showToast({
+					title: httpData.info || httpData.msg,
+					icon: "none",
+					duration: 3000
+				});
+			}
+			// 返回错误的结果(catch接受数据)
+			return Promise.reject({
+				statusCode: 0,
+				errMsg: "【request】" + (httpData.info || httpData.msg)
+			});
+		}
+
+		/*********以上只是模板(及共参考)，需要开发者根据各自的接口返回类型修改*********/
+
+	} else {
+		// 返回错误的结果(catch接受数据)
+		return Promise.reject({
+			statusCode: res.response.statusCode,
+			errMsg: "【request】数据工厂验证不通过"
+		});
+	}
+};
+// 错误回调
+uploader.requestError = function(e) {
+	// e.statusCode === 0 是参数效验错误抛出的
+	if (e.statusCode === 0) {
+		throw e;
+	} else {
+		uni.showToast({
+			title: "网络错误，请检查一下网络",
+			icon: "none"
+		});
+	}
+}
+export default uploader;

src/plugins/uploader/request/core/request.js

+import { mergeConfig, dispatchRequest, jsonpRequest} from "./utils.js";
+export default class request {
+	constructor(options) {
+		//请求公共地址
+		this.baseUrl = options.baseUrl || "";
+		//公共文件上传请求地址
+		this.fileUrl = options.fileUrl || "";
+		// 超时时间
+		this.timeout = options.timeout || 6000;
+		// 服务器上传图片默认url
+		this.defaultUploadUrl = options.defaultUploadUrl || "";
+		//默认请求头
+		this.header = options.header || {};
+		//默认配置
+		this.config = options.config || {
+			isPrompt: true,
+			load: true,
+			isFactory: true,
+            resend: 0
+		};
+	}
+	//post请求
+	post(url = '', data = {}, options = {}) {
+		return this.request({
+			method: "POST",
+			data: data,
+			url: url,
+			...options
+		});
+	}
+
+	//get请求
+	get(url = '', data = {}, options = {}) {
+		console.log(this.request,'this.request')
+		return this.request({
+			method: "GET",
+			data: data,
+			url: url,
+			...options
+		});
+	}
+
+	//put请求
+	put(url = '', data = {}, options = {}) {
+		return this.request({
+			method: "PUT",
+			data: data,
+			url: url,
+			...options
+		});
+	}
+
+	//delete请求
+	delete(url = '', data = {}, options = {}) {
+		return this.request({
+			method: "DELETE",
+			data: data,
+			url: url,
+			...options
+		});
+	}
+	//jsonp请求(只限于H5使用)
+	jsonp(url = '', data = {}, options = {}) {
+		return this.request({
+			method: "JSONP",
+			data: data,
+			url: url,
+			...options
+		});
+	}
+	//接口请求方法
+	async request(data) {
+		// 请求数据
+		let requestInfo,
+		// 是否运行过请求开始钩子
+		runRequestStart = false;
+		try {
+			if (!data.url) {
+				throw { errMsg: "【request】缺失数据url", statusCode: 0}
+			}
+			// 数据合并
+			requestInfo = mergeConfig(this, data);
+			// 代表之前运行到这里
+			runRequestStart = true;
+			//请求前回调
+			if (this.requestStart) {
+				let requestStart = this.requestStart(requestInfo);
+				if (typeof requestStart == "object") {
+					let changekeys = ["data", "header", "isPrompt", "load", "isFactory"];
+					changekeys.forEach(key => {
+						requestInfo[key] = requestStart[key];
+					});
+				} else {
+					throw {
+						errMsg: "【request】请求开始拦截器未通过",
+						statusCode: 0,
+						data: requestInfo.data,
+						method: requestInfo.method,
+						header: requestInfo.header,
+						url: requestInfo.url,
+					}
+				}
+			}
+			let requestResult = {};
+			if(requestInfo.method == "JSONP"){
+				requestResult = await jsonpRequest(requestInfo);
+			} else {
+				requestResult = await dispatchRequest(requestInfo);
+			}
+			//是否用外部的数据处理方法
+			if (requestInfo.isFactory && this.dataFactory) {
+				//数据处理
+				let result = await this.dataFactory({
+					...requestInfo,
+					response: requestResult
+				});
+				return Promise.resolve(result);
+			} else {
+				return Promise.resolve(requestResult);
+			}
+		} catch (err){
+			this.requestError && this.requestError(err);
+			return Promise.reject(err);
+		} finally {
+			// 如果请求开始未运行到，请求结束也不运行
+			if(runRequestStart){
+				this.requestEnd && this.requestEnd(requestInfo);
+			}
+		}
+	}
+}

src/plugins/uploader/request/core/utils.js

+// 获取合并的数据
+export const mergeConfig = function(_this, options) {
+	//判断url是不是链接
+	let urlType = /^(http|https):\/\//.test(options.url);
+	let config = Object.assign({
+		timeout: _this.timeout
+	}, _this.config, options);
+	if (options.method == "FILE") {
+		config.url = urlType ? options.url : _this.fileUrl + options.url;
+	} else {
+		config.url = urlType ? options.url : _this.baseUrl + options.url;
+	}
+	//请求头
+	if (options.header) {
+		config.header = Object.assign({}, _this.header, options.header);
+	} else {
+		config.header = Object.assign({}, _this.header);
+	}
+	return config;
+}
+// 请求
+export const dispatchRequest = function(requestInfo) {
+	return new Promise((resolve, reject) => {
+		let requestAbort = true;
+		let requestData = {
+			url: requestInfo.url,
+			header: requestInfo.header, //加入请求头
+			success: (res) => {
+				requestAbort = false;
+				resolve(res);
+			},
+			fail: (err) => {
+				requestAbort = false;
+				if(err.errMsg == "request:fail abort"){
+					reject({
+						errMsg: "请求超时，请重新尝试",
+						statusCode: 0,
+					});
+				} else {
+					reject(err);
+				}
+			}
+		};
+		//请求类型
+		if (requestInfo.method) {
+			requestData.method = requestInfo.method;
+		}
+		if (requestInfo.data) {
+			requestData.data = requestInfo.data;
+		}
+		// #ifdef MP-WEIXIN || MP-ALIPAY
+		if (requestInfo.timeout) {
+			requestData.timeout = requestInfo.timeout;
+		}
+		// #endif
+		if (requestInfo.dataType) {
+			requestData.dataType = requestInfo.dataType;
+		}
+		// #ifndef APP-PLUS || MP-ALIPAY
+		if (requestInfo.responseType) {
+			requestData.responseType = requestInfo.responseType;
+		}
+		// #endif
+		// #ifdef H5
+		if (requestInfo.withCredentials) {
+			requestData.withCredentials = requestInfo.withCredentials;
+		}
+		// #endif
+		let requestTask = uni.request(requestData);
+		console.log(requestTask,requestData,'requestTask')
+		setTimeout(() => {
+			if(requestAbort){
+				requestTask.abort();
+			}
+		}, requestInfo.timeout)
+	})
+}
+// jsonp请求
+export const jsonpRequest = function(requestInfo) {
+	return new Promise((resolve, reject) => {
+		let dataStr = '';
+		Object.keys(requestInfo.data).forEach(key => {
+			dataStr += key + '=' + requestInfo.data[key] + '&';
+		});
+		//匹配最后一个&并去除
+		if (dataStr !== '') {
+			dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
+		}
+		requestInfo.url = requestInfo.url + '?' + dataStr;
+		let callbackName = "callback" + Math.ceil(Math.random() * 1000000);
+		// #ifdef H5
+		window[callbackName] = function(data) {
+			resolve(data);
+		}
+		let script = document.createElement("script");
+		script.src = requestInfo.url + "&callback=" + callbackName;
+		document.head.appendChild(script);
+		// 及时删除，防止加载过多的JS
+		document.head.removeChild(script);
+		// #endif
+	});
+}
\ No newline at end of file

src/plugins/uploader/request/index.js

+/***************纯粹的数据请求（如果使用这种可以删除掉fileUpload.js）******************/
+// import request from "./core/request.js";
+// export default request;
+
+/********数据请求同时继承了文件上传（包括七牛云上传）************/
+import upload from "./upload/upload.js";
+export default upload;
\ No newline at end of file

src/plugins/uploader/request/upload/qiniuUploader.js

+// created by gpake
+(function () {
+
+  var config = {
+    qiniuRegion: '',
+    qiniuImageURLPrefix: '',
+    qiniuUploadToken: '',
+    qiniuUploadTokenURL: '',
+    qiniuUploadTokenFunction: null,
+    qiniuShouldUseQiniuFileName: false
+  }
+
+  module.exports = {
+    init: init,
+    upload: upload,
+  }
+
+  // 在整个程序生命周期中，只需要 init 一次即可
+  // 如果需要变更参数，再调用 init 即可
+  function init(options) {
+    config = {
+      qiniuRegion: '',
+      qiniuImageURLPrefix: '',
+      qiniuUploadToken: '',
+      qiniuUploadTokenURL: '',
+      qiniuUploadTokenFunction: null,
+      qiniuShouldUseQiniuFileName: false
+    };
+    updateConfigWithOptions(options);
+  }
+
+  function updateConfigWithOptions(options) {
+    if (options.region) {
+      config.qiniuRegion = options.region;
+    } else {
+      console.error('qiniu uploader need your bucket region');
+    }
+    if (options.uptoken) {
+      config.qiniuUploadToken = options.uptoken;
+    } else if (options.uptokenURL) {
+      config.qiniuUploadTokenURL = options.uptokenURL;
+    } else if (options.uptokenFunc) {
+      config.qiniuUploadTokenFunction = options.uptokenFunc;
+    }
+    if (options.domain) {
+      config.qiniuImageURLPrefix = options.domain;
+    }
+    config.qiniuShouldUseQiniuFileName = options.shouldUseQiniuFileName
+  }
+
+  function upload(filePath, success, fail, options, progress, cancelTask) {
+    if (null == filePath) {
+      console.error('qiniu uploader need filePath to upload');
+      return;
+    }
+    if (options) {
+      updateConfigWithOptions(options);
+    }
+    if (config.qiniuUploadToken) {
+      doUpload(filePath, success, fail, options, progress, cancelTask);
+    } else if (config.qiniuUploadTokenURL) {
+      getQiniuToken(function () {
+        doUpload(filePath, success, fail, options, progress, cancelTask);
+      });
+    } else if (config.qiniuUploadTokenFunction) {
+      config.qiniuUploadToken = config.qiniuUploadTokenFunction();
+      if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
+        console.error('qiniu UploadTokenFunction result is null, please check the return value');
+        return
+      }
+      doUpload(filePath, success, fail, options, progress, cancelTask);
+    } else {
+      console.error('qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]');
+      return;
+    }
+  }
+
+  function doUpload(filePath, success, fail, options, progress, cancelTask) {
+    if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
+      console.error('qiniu UploadToken is null, please check the init config or networking');
+      return
+    }
+    var url = uploadURLFromRegionCode(config.qiniuRegion);
+    var fileName = filePath.split('//')[1];
+    if (options && options.key) {
+      fileName = options.key;
+    }
+    var formData = {
+      'token': config.qiniuUploadToken
+    };
+    if (!config.qiniuShouldUseQiniuFileName) {
+      formData['key'] = fileName
+    }
+    var uploadTask = wx.uploadFile({
+      url: url,
+      filePath: filePath,
+      name: 'file',
+      formData: formData,
+      success: function (res) {
+        var dataString = res.data
+        if (res.data.hasOwnProperty('type') && res.data.type === 'Buffer') {
+          dataString = String.fromCharCode.apply(null, res.data.data)
+        }
+        try {
+          var dataObject = JSON.parse(dataString);
+          //do something
+          var imageUrl = config.qiniuImageURLPrefix + '/' + dataObject.key;
+          dataObject.imageURL = imageUrl;
+          if (success) {
+            success(dataObject);
+          }
+        } catch (e) {
+          console.log('parse JSON failed, origin String is: ' + dataString)
+          if (fail) {
+            fail(e);
+          }
+        }
+      },
+      fail: function (error) {
+        console.error(error);
+        if (fail) {
+          fail(error);
+        }
+      }
+    })
+
+    uploadTask.onProgressUpdate((res) => {
+      progress && progress(res)
+    })
+
+    cancelTask && cancelTask(() => {
+      uploadTask.abort()
+    })
+  }
+
+  function getQiniuToken(callback) {
+    wx.request({
+      url: config.qiniuUploadTokenURL,
+      success: function (res) {
+        var token = res.data.uptoken;
+        if (token && token.length > 0) {
+          config.qiniuUploadToken = token;
+          if (callback) {
+            callback();
+          }
+        } else {
+          console.error('qiniuUploader cannot get your token, please check the uptokenURL or server')
+        }
+      },
+      fail: function (error) {
+        console.error('qiniu UploadToken is null, please check the init config or networking: ' + error);
+      }
+    })
+  }
+
+  function uploadURLFromRegionCode(code) {
+    var uploadURL = null;
+    switch (code) {
+      case 'ECN': uploadURL = 'https://up.qbox.me'; break;
+      case 'NCN': uploadURL = 'https://up-z1.qbox.me'; break;
+      case 'SCN': uploadURL = 'https://up-z2.qbox.me'; break;
+      case 'NA': uploadURL = 'https://up-na0.qbox.me'; break;
+      case 'ASG': uploadURL = 'https://up-as0.qbox.me'; break;
+      default: console.error('please make the region is with one of [ECN, SCN, NCN, NA, ASG]');
+    }
+    return uploadURL;
+  }
+
+})();
\ No newline at end of file

src/plugins/uploader/request/upload/upload.js

+import request from "./../core/request.js";
+const {
+	chooseImage,
+	chooseVideo,
+	qiniuUpload,
+	urlUpload
+} = require("./utils");
+import {
+	mergeConfig
+} from "./../core/utils.js";
+export default class fileUpload extends request {
+	constructor(props) {
+		// 调用实现父类的构造函数
+		super(props);
+	}
+	//七牛云上传图片
+	async qnImgUpload(options = {}) {
+		let files;
+		try {
+			files = await chooseImage(options);
+			// 选择完成回调
+			options.onSelectComplete && options.onSelectComplete(files);
+		} catch (err) {
+			this.requestError && this.requestError(err);
+			return Promise.reject(err);
+		}
+		if (files) {
+			return this.qnFileUpload({
+				...options,
+				files: files
+			});
+		}
+	}
+	//七牛云上传视频
+	async qnVideoUpload(options = {}) {
+		let files;
+		try {
+			files = await chooseVideo(options);
+			// 选择完成回调
+			options.onSelectComplete && options.onSelectComplete(files);
+		} catch (err) {
+			this.requestError && this.requestError(err);
+			return Promise.reject(err);
+		}
+		if (files) {
+			return this.qnFileUpload({
+				...options,
+				files: files
+			});
+		}
+	}
+
+	//七牛云文件上传（支持多张上传）
+	async qnFileUpload(options = {}) {
+		let requestInfo;
+		try {
+			// 数据合并
+			requestInfo = {
+				...this.config,
+				...options,
+				header: {},
+				method: "FILE"
+			};
+			//请求前回调
+			if (this.requestStart) {
+				let requestStart = this.requestStart(requestInfo);
+				if (typeof requestStart == "object") {
+					let changekeys = ["load", "files"];
+					changekeys.forEach(key => {
+						requestInfo[key] = requestStart[key];
+					});
+				} else {
+					throw {
+						errMsg: "【request】请求开始拦截器未通过",
+						statusCode: 0,
+						data: requestInfo.data,
+						method: requestInfo.method,
+						header: requestInfo.header,
+						url: requestInfo.url,
+					}
+				}
+			}
+			let requestResult = await qiniuUpload(requestInfo, this.getQnToken);
+			return Promise.resolve(requestResult);
+		} catch (err) {
+			this.requestError && this.requestError(err);
+			return Promise.reject(err);
+		} finally {
+			this.requestEnd && this.requestEnd(requestInfo);
+		}
+	}
+	//本地服务器图片上传
+	async urlImgUpload() {
+		let options = {};
+		if (arguments[0]) {
+			if (typeof(arguments[0]) == "string") {
+				options.url = arguments[0];
+			} else if (typeof(arguments[0]) == "object") {
+				options = Object.assign(options, arguments[0]);
+			}
+		}
+		if (arguments[1] && typeof(arguments[1]) == "object") {
+			options = Object.assign(options, arguments[1]);
+		}
+		try {
+			options.files = await chooseImage(options);
+			// 选择完成回调
+			options.onSelectComplete && options.onSelectComplete(options.files);
+		} catch (err) {
+			this.requestError && this.requestError(err);
+			return Promise.reject(err);
+		}
+		if (options.files) {
+			return this.urlFileUpload(options);
+		}
+	}
+	//本地服务器上传视频
+	async urlVideoUpload() {
+		let options = {};
+		if (arguments[0]) {
+			if (typeof(arguments[0]) == "string") {
+				options.url = arguments[0];
+			} else if (typeof(arguments[0]) == "object") {
+				options = Object.assign(options, arguments[0]);
+			}
+		}
+		if (arguments[1] && typeof(arguments[1]) == "object") {
+			options = Object.assign(options, arguments[1]);
+		}
+		try {
+			options.files = await chooseVideo(options);
+			// 选择完成回调
+			options.onSelectComplete && options.onSelectComplete(options.files);
+		} catch (err) {
+			this.requestError && this.requestError(err);
+			return Promise.reject(err);
+		}
+		if (options.files) {
+			return this.urlFileUpload(options);
+		}
+	}
+	//本地服务器文件上传方法
+	async urlFileUpload() {
+		let requestInfo = {
+			method: "FILE"
+		};
+		if (arguments[0]) {
+			if (typeof(arguments[0]) == "string") {
+				requestInfo.url = arguments[0];
+			} else if (typeof(arguments[0]) == "object") {
+				requestInfo = Object.assign(requestInfo, arguments[0]);
+			}
+		}
+		if (arguments[1] && typeof(arguments[1]) == "object") {
+			requestInfo = Object.assign(requestInfo, arguments[1]);
+		}
+		if (!requestInfo.url && this.defaultUploadUrl) {
+			requestInfo.url = this.defaultUploadUrl;
+		}
+		// 请求数据
+		// 是否运行过请求开始钩子
+		let runRequestStart = false;
+		try {
+			if (!requestInfo.url) {
+				throw {
+					errMsg: "【request】文件上传缺失数据url",
+					statusCode: 0,
+					data: requestInfo.data,
+					method: requestInfo.method,
+					header: requestInfo.header,
+					url: requestInfo.url,
+				}
+			}
+			// 数据合并
+			requestInfo = mergeConfig(this, requestInfo);
+			// 代表之前运行到这里
+			runRequestStart = true;
+			//请求前回调
+			if (this.requestStart) {
+				let requestStart = this.requestStart(requestInfo);
+				if (typeof requestStart == "object") {
+					let changekeys = ["data", "header", "isPrompt", "load", "isFactory", "files"];
+					changekeys.forEach(key => {
+						requestInfo[key] = requestStart[key];
+					});
+				} else {
+					throw {
+						errMsg: "【request】请求开始拦截器未通过",
+						statusCode: 0,
+						data: requestInfo.data,
+						method: requestInfo.method,
+						header: requestInfo.header,
+						url: requestInfo.url,
+					}
+				}
+			}
+			let requestResult = await urlUpload(requestInfo, this.dataFactory);
+			return Promise.resolve(requestResult);
+		} catch (err) {
+			this.requestError && this.requestError(err);
+			return Promise.reject(err);
+		} finally {
+			if (runRequestStart) {
+				this.requestEnd && this.requestEnd(requestInfo);
+			}
+		}
+	}
+}

src/plugins/uploader/request/upload/utils.js

+const qiniuUploader = require("./qiniuUploader");
+//七牛云上传文件命名
+export const randomChar = function(l, url = "") {
+	const x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
+	let tmp = "";
+	let time = new Date();
+	for (let i = 0; i < l; i++) {
+		tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
+	}
+	return (
+		"file/" +
+		url +
+		time.getTime() +
+		tmp
+	);
+}
+//图片选择
+export const chooseImage = function(data) {
+	return new Promise((resolve, reject) => {
+		uni.chooseImage({
+			count: data.count || 9, //默认9
+			sizeType: data.sizeType || ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+			sourceType: data.sourceType || ['album', 'camera'], //从相册选择
+			success: function(res) {
+				resolve(res.tempFiles);
+			},
+			fail: err => {
+				reject({
+					errMsg: err.errMsg, 
+					errCode: err.errCode, 
+					statusCode: 0,
+				});
+			}
+		});
+	});
+}
+//视频选择
+export const chooseVideo = function(data) {
+	return new Promise((resolve, reject) => {
+		uni.chooseVideo({
+			sourceType: data.sourceType || ['album', 'camera'], //从相册选择
+			compressed: data.compressed || false, //是否压缩所选的视频源文件，默认值为 true，需要压缩。
+			maxDuration: data.maxDuration || 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
+			camera: data.camera || 'back', //'front'、'back'，默认'back'
+			success: function(res) {
+				let files = [{
+					path: res.tempFilePath
+				}];
+				// #ifdef APP-PLUS || H5 || MP-WEIXIN
+				files[0].duration = res.duration;
+				files[0].size = res.size;
+				files[0].height = res.height;
+				files[0].width = res.width;
+				// #endif
+				// #ifdef H5
+				files[0].name = res.name;
+				// #endif
+				resolve(files);
+			},
+			fail: err => {
+				reject({
+					errMsg: err.errMsg, 
+					errCode: err.errCode, 
+					statusCode: 0,
+				});
+			}
+		});
+	});
+}
+// 七牛云上传
+export const qiniuUpload = function(requestInfo, getQnToken) {
+	return new Promise((resolve, reject) => {
+		if (Array.isArray(requestInfo.files)) {
+			let len = requestInfo.files.length;
+			let fileList = new Array;
+			if (getQnToken) {
+				console.log(getQnToken,'getQnToken')
+				getQnToken(qnRes => {
+					console.log(qnRes,'qnRes')
+					/*
+					 *接口返回参数：
+					 *visitPrefix:访问文件的域名
+					 *token:七牛云上传token
+					 *folderPath:上传的文件夹
+					 *region: 地区 默认为：SCN
+					 */
+                    let prefixLen = qnRes.visitPrefix.length;
+                    if(qnRes.visitPrefix.charAt(prefixLen - 1) == '/'){
+                        qnRes.visitPrefix = qnRes.visitPrefix.substring(0, prefixLen - 1)
+                    }
+					uploadFile(0);
+
+					function uploadFile(i) {
+						let item = requestInfo.files[i];
+						let updateUrl = randomChar(10, qnRes.folderPath);
+						let fileData = {
+							fileIndex: i,
+							files: requestInfo.files,
+							...item
+						};
+						if (item.name) {
+							fileData.name = item.name;
+							let nameArr = item.name.split(".");
+							updateUrl += "." + nameArr[nameArr.length - 1];
+						}
+						// 交给七牛上传
+						qiniuUploader.upload(item.path || item, (res) => {
+							fileData.url = res.imageURL;
+							requestInfo.onEachUpdate && requestInfo.onEachUpdate({
+								url: res.imageURL,
+								...fileData
+							});
+							fileList.push(res.imageURL);
+							if (len - 1 > i) {
+								uploadFile(i + 1);
+							} else {
+								resolve(fileList);
+							}
+						}, (error) => {
+							reject(error);
+						}, {
+							region: qnRes.region || 'SCN', //地区
+							domain: qnRes.visitPrefix, // bucket 域名，下载资源时用到。
+							key: updateUrl,
+							uptoken: qnRes.token, // 由其他程序生成七牛 uptoken
+							uptokenURL: 'UpTokenURL.com/uptoken' // 上传地址
+						}, (res) => {
+							console.log(requestInfo);
+							requestInfo.onProgressUpdate && requestInfo.onProgressUpdate(Object.assign({}, fileData, res));
+							// console.log('上传进度', res.progress)
+							// console.log('已经上传的数据长度', res.totalBytesSent)
+							// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
+						});
+					}
+				});
+			} else {
+				reject({
+					errMsg: "请添加七牛云回调方法：getQnToken",
+					statusCode: 0
+				});
+			}
+		} else {
+			reject({
+				errMsg: "files 必须是数组类型",
+				statusCode: 0
+			});
+		};
+	});
+}
+// 服务器URL上传
+export const urlUpload = function(requestInfo, dataFactory) {
+	return new Promise((resolve, reject) => {
+		// 本地文件上传去掉默认Content-Type
+		if (requestInfo.header['Content-Type']) {
+			delete requestInfo.header['Content-Type'];
+		}
+		// 本地文件上传去掉默认Content-Type
+		if (requestInfo.header['content-type']) {
+			delete requestInfo.header['content-type'];
+		}
+		if (Array.isArray(requestInfo.files)) {
+			// #ifdef APP-PLUS || H5
+			let files = [];
+			let fileData = {
+				files: requestInfo.files,
+				name: requestInfo.name || "file"
+			};
+			requestInfo.files.forEach(item => {
+                let fileInfo = {
+                    name: requestInfo.name || "file",
+                };
+                if(item.path){
+                    fileInfo.uri = item.path;
+                } else {
+                    fileInfo.file = item;
+                }
+				files.push(fileInfo);
+			});
+			let config = {
+				url: requestInfo.url,
+				files: files,
+				header: requestInfo.header, //加入请求头
+				success: (response) => {
+					//是否用外部的数据处理方法
+					if (requestInfo.isFactory && dataFactory) {
+						//数据处理
+						dataFactory({
+							...requestInfo,
+							response: response,
+						}).then(data => {
+							requestInfo.onEachUpdate && requestInfo.onEachUpdate({
+								data: data,
+								...fileData
+							});
+							resolve(data);
+						},err => {
+							reject(err);
+						});
+					} else {
+						requestInfo.onEachUpdate && requestInfo.onEachUpdate({
+							data: response,
+							...fileData
+						});
+						resolve(response);
+					}
+				},
+				fail: (err) => {
+					reject(err);
+				}
+			};
+			if (requestInfo.data) {
+				config.formData = requestInfo.data;
+			}
+			const uploadTask = uni.uploadFile(config);
+			uploadTask.onProgressUpdate(res => {
+				requestInfo.onProgressUpdate && requestInfo.onProgressUpdate(Object.assign({}, fileData, res));
+			});
+			// #endif
+			// #ifdef MP
+			const len = requestInfo.files.length - 1;
+			let fileList = new Array;
+			fileUpload(0);
+
+			function fileUpload(i) {
+				let item = requestInfo.files[i];
+				let fileData = {
+					fileIndex: i,
+					files: requestInfo.files,
+					...item
+				};
+				let config = {
+					url: requestInfo.url,
+					filePath: item.path,
+					header: requestInfo.header, //加入请求头
+					name: requestInfo.name || "file",
+					success: (response) => {
+						//是否用外部的数据处理方法
+						if (requestInfo.isFactory && dataFactory) {
+							//数据处理
+							dataFactory({
+								...requestInfo,
+								response: response,
+							}).then(data => {
+								fileList.push(data);
+								requestInfo.onEachUpdate && requestInfo.onEachUpdate({
+									data: data,
+									...fileData
+								});
+								if (len <= i) {
+									resolve(fileList);
+								} else {
+									fileUpload(i + 1);
+								}
+							},err => {
+								reject(err);
+							});
+						} else {
+							requestInfo.onEachUpdate && requestInfo.onEachUpdate({
+								data: response,
+								...fileData
+							});
+							fileList.push(response);
+							if (len <= i) {
+								resolve(fileList);
+							} else {
+								fileUpload(i + 1);
+							}
+						}
+					},
+					fail: (err) => {
+						reject(err);
+					}
+				};
+				if (requestInfo.data) {
+					config.formData = requestInfo.data;
+				}
+				const uploadTask = uni.uploadFile(config);
+				uploadTask.onProgressUpdate(res => {
+					requestInfo.onProgressUpdate && requestInfo.onProgressUpdate(Object.assign({}, fileData, res));
+				});
+			}
+			// #endif
+		} else {
+			reject({
+				errMsg: "files 必须是数组类型",
+				statusCode: 0
+			});
+		}
+	});
+}