uniapp+thinkphp圖片上傳

頭一次用uniapp來作上傳，特別記錄下

前臺選擇圖片就用官方給成的chooseImage就好，點擊以後選擇圖片，而後展現到頁面，最後點擊上傳再執行。比較特別的是app支持多圖上傳，小程序不支持，因此只能循環了。
上傳的圖片每次都push進默認數組，這樣就能夠點擊刪除時完成操做

<template>
	<view class="content">
		<view name= "img[]" class="" @click="get_img">點擊上傳</view>
		<view v-for="(item ,index) in show_img_list" :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',
				show_img_list:[],
				img_list:[],
			    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 show_img_list = res.tempFiles; //顯示的圖片
					   var show_img_list_all =  _self.show_img_list;
					   var upload_img_list = res.tempFilePaths; //上傳的圖片
					   var upload_img_list_all =  _self.img_list;
					    
					   //須要顯示的圖片
					    
						for(var i = 0;i<show_img_list.length;i++){
						   var needshow_img_item= show_img_list[i]; 
						    _self.show_img_list.push(needshow_img_item);
					   } 
					   //處理須要上傳的圖片
					   for(var i = 0;i<upload_img_list.length;i++){
						   var needupload_img_item= upload_img_list[i];     
						    _self.img_list.push(needupload_img_item);
					   } 
					   
					
						
				    }
				});
				 
			},
			img_delete(idx){
				const self = this; 
				  self.img_list.splice(idx,1);
				  self.show_img_list.splice(idx,1);;
			},
			do_upload(){
				console.log("do_upload");
			 
				const img_list =this.img_list;
				console.log(img_list);
				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();
        }    
   
    }