怎么在ThinkPHP5中使用Layui實現圖片上傳加預覽功能

怎么在ThinkPHP5中使用Layui實現圖片上傳加預覽功能？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

html代碼

<div class="layui-upload">
 <button type="button" class="layui-btn" id="cover">上傳封面</button>
</div> 
<div class="layui-input-inline">
 <img id="preview" width="200px" height="200px">
</div>

js代碼

var uploadInst = upload.render({
  elem:'#cover'
  ,url:'addCourse'
  ,accept:'file' // 允許上傳的文件類型
  ,auto:true // 自動上傳
  ,before:function (obj) {
   console.log(obj);
   // 預覽
   obj.preview(function(index,file,result) {
    // console.log(file.name); //圖片名字
    // console.log(file.type); //圖片格式
    // console.log(file.size); //圖片大小
    // console.log(result); //圖片地址
    $('#preview').attr('src',result); //圖片鏈接 base64
   });
   // layer.load();
  }
  // 上傳成功回調
  ,done:function(res) {
   // console.log(upload);
   console.log(res);
  }
  // 上傳失敗回調
  ,error:function(index,upload) {
   // 上傳失敗
  }
 });

php接口

$file = request()->file('file');
 // 移動到框架應用根目錄/public/uploads/ 目錄下
 $info = $file->move('public/upload/');
 if ($info) {
  $path = 'public/upload/'.$info->getSaveName();
  return return_succ($path);
 }

thinkphp是什么

thinkphp屬于一種免費的開發框架，能夠用于開發前端網頁，最早thinkphp是為了簡化開發而產生的，thinkphp同時也是遵循Apache2協議，最初是從Struts演變過來，也把國外一些好的框架模式進行利用，使用面向對象的開發結構，兼容了很多標簽庫等模式，它能夠更方便和快捷的開發和部署應用，當然不僅僅是企業級應用，任何php應用開發都可以從thinkphp的簡單、兼容和快速的特性中受益。

看完上述內容，你們掌握怎么在ThinkPHP5中使用Layui實現圖片上傳加預覽功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！