uniapp+thinkphp图片上传

头一次用uniapp来做上传，特别记录下

前台选择图片就用官方给成的chooseImage就好，点击之后选择图片，然后展示到页面，最后点击上传。
比较特别的是app支持多图上传，小程序不支持，所以只能循环了。

上传的图片每次都push进默认数组，这样就可以点击删除时完成操作

  <template>
	<view class="content">
		<view name= "img[]" class="" @click="get_img">点击上传</view>
		<view v-for="(item ,index) in tempFiles " :key="index" >
		    <view class="upload_img_item"> <view class="upload_img_close">X</view>
			<image :src="item.path" class="upload_img"  @click="img_delete(index)"></image>
			</view>
		</view> 
		<view @click="do_upload">上传</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello', 
				tempFiles :[],
				uploadList:[],
			    img_status:false, 
				
			}
		},
		onLoad() {
			 
		},
		methods: {
			get_img(){
				const _self = this;
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) { 
						 
				        console.log(JSON.stringify(res.tempFilePaths));
				        
		               var tempFiles = res.tempFiles; //显示的图片
					   var tempFilePaths = res.tempFilePaths; //上传的图片
						
					   //需要显示的图片
						for(var i = 0;i<tempFiles.length;i++){ 
							_self.tempFiles .push(tempFiles[i]);
					   } 
					   
					   //处理需要上传的图片
					   for(var i = 0;i<tempFilePaths .length;i++){
							_self.uploadList.push(tempFilePaths[i]);
					   } 
					   
				    }
				});
				 
			},
			img_delete(e){
				const self = this; 
				  self.imageList.splice(e,1);
			     self.uploadList.splice(e,1);
			},
			do_upload(){
				console.log("do_upload");
			 
				const img_list =this.uploadList;
				console.log(uploadList);
				var i=0;
			 for(i;i<img_list.length;i++){
				   const uploadTask =uni.uploadFile({
				 	url:'服务器接收图片的地址',
				 	filePath: img_list[i],
				 	fileType: 'image',
				 	name: 'file', 
				 	formData: {
				 	    'user_id':'testssssssss'
				 	},
				 	 
				 	success: (res) => { 
						console.log(res.data) 
						var myurl = JSON.parse( res.data );
						console.log(myurl); 
						console.log(myurl.data); 
						
				 	 
				 	}
				 });
			 }
			   //上传进度
				//   uploadTask.onProgressUpdate((res) => {
				//             console.log('上传进度' + res.progress);
				//             console.log('已经上传的数据长度' + res.totalBytesSent); 
				//             console.log(res); 
				
				//             // 测试条件，取消上传任务。
				//             if (res.progress > 50) {
				//                 uploadTask.abort();
				//             }
				//         });
			}

		}
	}
</script>

<style>
.upload_img_item{
	position: relative;
}

.upload_img_close{
	position: absolute;
	z-index: 999;
	right: 0;
	color:#fff;
	background: #DD524D;
}
.upload_img{
	width: 90px;
	height: 90px;
	display: block;
}	 
</style>

然后是服务端

 public function upload_img()
    {
      header("Access-Control-Allow-Origin:*");
      header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE"); 
      header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");
      header('Access-Control-Allow-Headers: content-type,token');

      $data=$this->request->param();//获取传参
      $files = $this->request->file('file');//获取图片
  
        // 移动到框架应用根目录/uploads/ 目录下
        $info = $files->move('../public/upload/xcx/');//保存到xcx目录下

         $path = '/upload/xcx/'.date('Ymd',time()).'/'.$info->getFilename();//图片上传后的地址
     
        if($info){
            // 成功上传后 获取上传信息 
            echo $info->getExtension();  
            echo $info->getFilename(); 

      $this->success('请求成功!', $path);
        }else{
            // 上传失败获取错误信息
            echo $files->getError();
        }    
   
    }