最近愛(ài)上了用vue.js做前端，昨天用vue上傳圖片時(shí)遇到了問(wèn)題，最后半天時(shí)間終于摸索出來(lái)，我將相關(guān)部分的代碼貼出來(lái)。
前端部分
<div class="form-group"> <label>背景圖</label> <input type="file" class="form-control" @change="onFileChange"> </div><div class="form-group" v-if="image"> <label>背景圖預(yù)覽</label> </div>
vue.js部分
在methods里添加
onFileChange(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]); },createImage(file) { var image = new Image(); var reader = new FileReader(); var vm = this; reader.onload = (e) => { vm.image = e.target.result; }; reader.readAsDataURL(file);},那么提交時(shí)如何獲取呢？
在提交的方法里，通過(guò) this.image 即可，獲取的圖片格式是圖片流格式，以data:image開(kāi)頭。
如何在后端(我用php)獲取呢？
直接貼代碼
$bg = $request->get('image');//獲取圖片流$url = explode(',',$bg);$filename = md5(time().str_random(8)).'.png';//自定義圖片名$filepath = public_path('image').'/'.$filename;//圖片存儲(chǔ)路徑$bgurl = '/image/'.$filename;//圖片url ，具體看自己后臺(tái)環(huán)境，我用的是laravelfile_put_contents($filepath, base64_decode($url[1]));//保存圖片到自定義的路徑將$bgurl保存在數(shù)據(jù)庫(kù)即可。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
