图片文件上传

src/components/upload/index.js

@@ -22,22 +22,50 @@ export default {
 	},
 	methods: {	
 		async chooseImage(type){
-			let imageList = []
+			const self = this
+			let imgList = []
 			if(type==='qiniu'){
 				// 七牛上传
-				let res = await uploader.qnImgUpload()
-				console.log(res,'res--------qnImgUpload')
-				// res.map(item=>{
-				// 	imageList.push()
-				// })
-				console.log(uploader,uploader.qiniuTokenObj,'qiniuTokenObj')
-				let imgList = res.map(item=>{
-					return {
-						key:item,
-						src:uploader.qiniuTokenObj.visitPrefix + item
+				let options = {
+					onProgressUpdate(res){
+						let item = {
+							path:res.path, // 图片临时缓存路径
+							key:'', // 图片上传成功后相对路径
+							src:'', // 访问图片的绝对路径
+							progress:res.progress // 图片上传进度
 						}
-				})
-				this.imgList = imgList
+						if(res.fileIndex<imgList.length){
+							imgList[res.fileIndex].progress = res.progress
+						}else{
+							imgList.push(item)
+						}
+						imgList[res.fileIndex]
+						self.imgList = imgList
+						// 多文件上传每个文件进度条
+						console.log(res,'res---onProgressUpdate')
+					},
+					onEachUpdate(res){
+						// 多文件上传每个文件上传成功触发
+						if(imgList.length>res.fileIndex){
+							imgList[res.fileIndex].key = res.url
+							imgList[res.fileIndex].src = uploader.qiniuTokenObj.visitPrefix + res.url
+						}
+						self.imgList = imgList
+						console.log(res,'res---onEachUpdate')
+					}
+				}
+				
+				// 不需要进度条等可直接获取
+				let res = await uploader.qnImgUpload(options)
+				console.log(self.imgList,'self.imgList')
+				// console.log(uploader,uploader.qiniuTokenObj,'qiniuTokenObj')
+				// let imgList = res.map(item=>{
+				// 	return {
+				// 		key:item,
+				// 		src:uploader.qiniuTokenObj.visitPrefix + item
+				// 	}
+				// })
+				// this.imgList = imgList
 				return
 			}
 			// 本地服务上传

src/pages/settle/file-upload.vue

@@ -9,7 +9,6 @@
 				<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('qiniu')">

src/plugins/uploader/index.js

@@ -27,7 +27,7 @@ let baseOptions = {
 let uploader = new request(baseOptions);
 
 // 添加获取七牛云token的方法
-uploader.getQnToken = function(callback) {
+uploader.getQnToken = function() {
 	//该地址需要开发者自行配置（每个后台的接口风格都不一样）
 	// console.log(uploader.get,'uploader.get')
 	return new Promise((resolve, reject) => {

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