使用laravel和vue.js制作一个上传图片的组件

首先 在./components/common/创建组件的vue文件imageUpload.vue
然后记得在components下的app.js注册组件

Vue.component('image-upload', require('./components/common/imageUpload.vue'))

image-upload就是组件名

imageUpload.vue 内容为

注：上传图片的默认图片我这里放在了public下的image下，可根据自己需要修改
这样在引入时候直接调用就可以使用上传组件了

写好了组件 我们来看看怎么使用laravel去写上传部分的后端代码
首先要在public文件下创建/upload/images的路径存放图片
下面看看后端的代码:
public function imgUpload(Request $req) {
$uploadImg=$req->imgUrl;
$data=array();
$data['imagesPath']='';
$data['error']='';
$data['status']=1;
if($uploadImg){
$base64_body = substr(strstr($uploadImg, ','), 1);
$img = base64_decode($base64_body);
$path='upload/images/';
if(!file_exists($path)){
$data['error']='文件目录不存在';
$data['status']=0;
}
$filename = $path. date('YmdHis', time()).rand(100000,999999) . '.jpg';
if (file_put_contents($filename, $img, FILE_APPEND)) {
$data['imagesPath']=url($filename);
} else {
fopen($filename, 'a+');
unlink($filename);
$data['error']='文件获取失败!';
$data['status']=0;
}
}
return $data;
}
返回的data就是我们的文件路径了 你可以在这里上传路径到数据库

最后在路由文件里面注册这个方法 就可以在前端异步请求了