laravel 資料庫表內的圖片轉傳到阿里雲oss
阿新 • • 發佈：2019-01-25
1. html+css+jquery
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>七牛轉阿里</title> {!! Html::script('project/xundu/js/mobile/jquery-2.1.4.min.js') !!} <style> #t{ margin: 0 auto; margin-top: 100px; } table tr td input{ width: 400px; height: 50px; border: 2px solid #DEDEDE; font-size: 30px; border-radius: 10px; color: #00a2d4; } table tr td span{ font-size: 30px; font-weight: 900; color: #5b6f7c; } #show{ border: 2px solid #DEDEDE; width: 100%; height: 500px; border-radius: 10px; background-color: #9a9a9a; color: #fff; overflow:scroll; } table tr td:first-child{ text-align: right; } </style> </head> <body> <table id="t"><tr> <td></td> <td><span>上傳OSS</span><br><br><br></td> <td></td> </tr> <tr> <td><span>表名：</span></td> <td><input type="text" name="database" id="database"></td> <td></td> </tr> <tr> <td><span>欄位：</span></td> <td><input type="text" name="fidles" id="fidles"></td> <td></td> </tr> <tr> <td><span>初始ID：</span></td> <td><input type="text" name="id" id="id"></td> <td></td> </tr> <tr> <td><span>數量：</span></td> <td><input type="text" name="num" id="num"></td> <td></td> </tr> <tr> <td></td> <td><input type="button" value="開 始 上 傳" onclick="upload()"></td> <td></td> </tr> </table> <br> <br> <div id="show"> </div> <script> function upload(){ var database = $('#database').val(); var fidles = $('#fidles').val(); var num = $('#num').val(); var id = $('#id').val(); $('#show').html('<span><p>正在查詢...</p></span>'); $.ajax({ type: 'post', url: "{!! route('dsk_mall_photo.select') !!}", data: {'database':database,'fidles':fidles,'num':num,id:id}, success:function(data){ if(data){ $('#show').prepend('<span><p>查詢成功！</p></span>'); console.log(data); for(var i=0;i<data.length;i++) { $.ajax({ type: 'post', url: '{!! route('dsk_mall_photo.oss_sc') !!}', data: {data:data[i],'database':database,'fidles':fidles}, success:function(data){ if(data){ $('#show').prepend('<span><p>成功上傳'+data['id']+'：'+data['thumb']+'</p></span>'); } }, error:function(data){ console.log(data[i]); $('#show').prepend('<span><p>上傳失敗！！</p></span>'); } }); } }else{ $('#show').prepend('<span><p>查詢失敗！</p></span>'); return; } }, error:function(){ $('#show').prepend('<span><p>查詢失敗！</p></span>'); return; } }); } </script> </body> </html>
2. 後臺
// 查詢資料庫中所有的圖片 public function postSelect(Request $request){ $database = $request->input('database'); $fidles = $request->input('fidles'); $num = $request->input('num'); $id = $request->input('id'); $key = explode(',', $fidles); $key_id = $key[0]; $key_thumb = $key[1]; $data = \DB::select('select ' . $fidles . ' from ' . $database . ' where id >= ' . $id . ' limit ' . $num); if(!$data) return '查詢失敗'; foreach($data as $k => $v){ $arr[$k]['id'] = $v->$key_id; $arr[$k]['thumb'] = $v->$key_thumb; } return $arr; } // 上傳 public function postOss_sc(Request $request){ $database = $request->input('database'); $fidles = $request->input('fidles'); $key = explode(',', $fidles); $key_thumb = $key[1]; $data = $request->input('data'); $id = $data['id']; $thumb = $data['thumb']; if(strpos($thumb, 'xunduwang.oss-cn-beijing')) return ['id'=>$id, 'thumb'=>'上傳失敗，圖片已在阿里雲伺服器上。']; if(empty($id)) return ['id'=>$id, 'thumb'=>'上傳失敗，id為空。']; if(empty($thumb)) return ['id'=>$id, 'thumb'=>'上傳失敗，圖片為空。']; $a = file_get_contents($thumb); $imgName = date('YmdHis',time()).rand(10000,99999).".jpg"; $img_path = 'image/'.$imgName; $resource = fopen(public_path().'/image/'.$imgName,'w+'); fwrite($resource,$a); fclose($resource); // 上傳阿里雲 $bucket = Config::OSS_TEST_BUCKET; $ossClient = Common::getOssClient(); $object = $img_path; $result = $ossClient->UploadFile($bucket, $object, $img_path); if (!$result) { dump("上傳圖片失敗"); } unlink($object); $img = $result['oss-request-url']; \DB::update('update ' . $database . ' set ' . $key_thumb . '="' . $img . '" where id = ' . $id); if($data) return ['id'=>$id,'thumb'=>$img]; }