element文件上传

npm i element-ui -S            ————安装element-ui

npm uninstall element-ui       ————卸载element-ui

 

//引入element

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

 

 

 

//js/components下新建组件

<template>

<el-upload

  class="upload-demo"

  action="/upload_vue"

  :on-preview="handlePreview"

  :on-remove="handleRemove"

  :on-success="handleSuccess" //开启上传成功的钩子

  :file-list="fileList2"

  :headers="{'X-CSRF-TOKEN':csrfToken}"

  list-type="picture"

  on-error="erro">

  <el-button size="small" type="primary">点击上传</el-button>

  <p slot="tip" class="el-upload__tip">只能上传jpg/png文件</p>

</el-upload>

</template>

 

<script>

  export default {

    data() {

      return {

        csrfToken:$('meta[name="csrf-token"]').attr('content'),

        fileList2: []

      };

    },

    methods: {

      handleRemove(file, fileList) {

        console.log(file, fileList);

      },

      //当上传成功会返回数据并弹出ok

      handleSuccess(res,file){

        if(res.message){

          alert("ok");

        }

      },

      handlePreview(file) {

        console.log(file);

      }

    }

  }

</script>

 

//注册组件

Vue.component("upload-component",require("./components/Upload.vue"));

 

 

//configfilesystems.php'disks' => []设置文件存储位置

'uploads' =>[

            'driver' =>'local',

            'root' =>public_path('uploads'),

        ],

 

 

 

 

//页面

<p id="app">

   <upload-component>

</upload-component>

</p>

 

//路由

Route::get('appTest', function () {

    return view('index/appTest');

});

Route::post('/upload_vue','IndexController@upload_vue');

 

 

 

//控制器

//appTest-->upload

    public function upload_vue(Request $request){

        if(!$request->hasFile('file')){     //判断文件是否存在

            return response()->json([],500,'erro');

        }

        $file =$request->file('file');

        if($file->isValid()){

            $originalName =$file->getClientOriginalName();  //获取文件原名

            $ext =$file->getClientOriginalExtension();  //获取文件拓展名

            $realPath =$file->getRealPath();   //绝对路径

            $type =$file->getClientMimeType();   //img/**

 

            //上传图片到uploads文件夹下

            $filename =date('Y-m-d/H:i:s');     

            $path =$file->store($filename,'uploads');

            //返回

            return response()->json([

                'status_code' =>200,

                'message' =>'success',

                'photo' =>$path,

                'name' =>$originalName,

            ]);

            

        }else{

            return response()->json([],500,'文件未通过验证');

        }

    }

}

 

 

 

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容