1. 程式人生 > 實用技巧 >uniapp 使用uview框架完成圖片上傳,後端Thinkphp5.1

uniapp 使用uview框架完成圖片上傳,後端Thinkphp5.1

剛開始遇到了很多坑,為了避免大家踩坑,直接上程式碼:

  template

<u-upload 
	ref="uUpload"
	:action="action" 
	:auto-upload="true" 
	max-count="9" 
	name="image"
	size-type="['compressed']"
	max-size="3145728"
	>
</u-upload>
<u-button @click="submit">提交</u-button>

  script

data() {
			return {
				// 伺服器地址
				action: getApp().globalData.api_url +'/index/Api/upload',
			}
		},
		methods: {
			submit() {
				let files = [];
				// 通過filter,篩選出上傳進度為100的檔案(因為某些上傳失敗的檔案,進度值不為100,這個是可選的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要進行太多的處理,直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files)
			},
}

  PHP

//接收圖片資訊並存在本地
    public function upload(){
        // 獲取表單上傳檔案
        $file = request()->file('image');
        // 移動到框架應用根目錄/uploads/ 目錄下
        $info = $file->validate(['size'=>3145728,'ext'=>'jpg,png,gif,JPG,PNG'])->move( '../public/uploads');
        if($info){
            // 成功上傳後 獲取上傳資訊
            $return_data = array(
                'code'=>0,
                'msg'=>"圖片上傳成功!",
                'result'=>"uploads/".$info->getSaveName(),
            );
            return json_encode($return_data);
        }else{
            // 上傳失敗獲取錯誤資訊
            $return_data = array(
                'code'=>1,
                'msg'=>$file->getError(),
            );
            return json_encode($return_data);
        }
    }