uniapp开发微信小程序使用uview 1.0 封装图片上传组件

最近接手最近开始接手了公司的第二个小程序项目，第一个是用的wepy+vant weapp做的。而目前的小程序用到的是uniapp+uview 1.0 ，我的需求是封装一个评价晒单组件。照着第一个小程序用vant 做的图片封装组件我打开了uview，折腾了大半天效果依然不尽人意。后来发现公司用的1.0的 uview 才慢慢醒悟过来。

熟悉uview 2.0的朋友对他的图片上传组件应该不陌生，但是1.0就有些头疼了。那么下面废话不多说，直接上代码：

<u-upload :file-list="fileList" @on-choose-complete="afterRead" del-bg-color="#5e5e5e"
	@on-remove="deletePic" :auto-upload="false"  uploadIcon="plus" :show-progress="false"
	:action="baseUrl" name="file" multiple imageMode :maxCount="9" 
	width="212rpx" height="212rpx"
></u-upload>

上面的这些大家有不懂的可以参考官方文档：Upload 上传 | uView - 多平台快速开发的UI框架 - uni-app UI框架

		onSubmit() {
				// console.log(uni.$u.config.v);
						Tips.confirm('确定评价吗？').then(() => {
					      //TODO shopid
					      let that=this;
					      Tips.loading(
					      // const toast = Tips.loading(
					      		"上传中..."
					      );														
					      let promiseList = [];
								this.Lists = this.fileList // 这里的写法是为了避免图片回显
								this.fileList = [] // 这里的写法是为了避免图片回显
					      for (let i = 0; i<this.Lists.length;i++) {
					      		// 只上传本地文件
					      		if (this.Lists[i].url.indexOf('tmp') !== -1) {
					      				promiseList.push(new Promise(function (resolve, reject) {
					      					qiniu.upload(that.Lists[i].url, (res) => {
					      							that.Lists[i].url = res.imageURL;
					      							resolve(res.data);
					      					}, (error) => {
					      							console.log('error: ' + error);
					      					}, {
					      							uploadURL: '公司的图片上传网址',
					      							domain: that.baseUrl, //自己的cdn域名
					      							uptoken:that.token, // 后端拿到的token
					      							key: that.Lists[i].name,
					      					}, (res) => {
					      							console.log(res, that.Lists[i])
					      					}, () => {
					      							// 取消上传
					      					}, () => {
					      							// `before` 上传前执行的操作
					      					}, (err) => {
					      							// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
					      					});
					      			})
					      		)
					      		}
					      }
					      
					      Promise.all(promiseList).then( async (results) =>  {
					      		console.log("图片上传完成"); //返回上传成功的数据
					      		for(let i=0;i<this.Lists.length;i++) {
					      				let url = this.Lists[i].url;
												if( i == 0 ){
													this.commpath1 = url
												}
												if( i == 1 ){
													this.commpath2 = url
												}
												if( i == 2 ){
													this.commpath3 = url
												}
												if( i == 3 ){
													this.commpath4 = url
												}
												if( i == 4 ){
													this.commpath5 = url
												}
												if( i == 5 ){
													this.commpath6 = url
												}
												if( i == 6 ){
													this.commpath7 = url
												}
												if( i == 7){
													this.commpath8 = url
												}
												if( i == 8 ){
													this.commpath9 = url
												}
					      		}
										let res1 = []
					          res1 = await user.checkMsg(this.value)
					      		if(res1 == false) {
					      				uni.showModal({
					      						content: '内容可能存在潜在风险，请检查。',
					      						showCancel: false
					      				})
					      				return;
					      		}
					      		let params = {
					      				score : this.score,
												comment : this.value,
												anonymous : this.anonymous,
												refbilliid : this.refbilliid,
												reftype : this.reftype,
												commpath1 : this.commpath1,
												commpath2 : this.commpath2,
												commpath3 : this.commpath3,
												commpath4 : this.commpath4,
												commpath5 : this.commpath5,
												commpath6 : this.commpath6,
												commpath7 : this.commpath7,
												commpath8 : this.commpath8,
												commpath9 : this.commpath9
					      		};
										let res = []
										console.log(params);
										res = await user.shoppingOrdercomm(JSON.stringify(params))
										console.log(res);
					      				Tips.loaded();
					      				if (res.resp_code == 200) {
													Tips.modal('评论成功').then(() => {
															 uni.navigateBack({
																	 delta: 1
															 })
													});
					      				}
					      				else {
					      						Tips.alert(res.resp_msg);
					      						return;
					      				}
					      		// });
					      
					      }).
					      catch(function (err) {
					      		console.log(err);
					      });	

        }).catch(() => {
          // on cancel
        });
			},
			

		}

大家有任何问题可以直接与我沟通！

切记：uview 1.0 图片上传一定要绑定 :action=" action " 否则会报错。除此之外一定要找到对应版本的官方文档，不然浪费大把的时间就得不偿失了。