Laravel+vue+element-ui上传图片头像至本地
最近在写通过laravel和vue方式的前后端分离项目,记录一下上传图片文件的一些问题
1.使用element-ui组件
直接去官网引用组件https://element.eleme.cn/#/zh-CN/component/upload
- 组件代码
<el-form-item label="图片:" prop="picture">
<el-upload
class="avatar-uploader"
action="你的接口地址"
//是否显示已上传文件列表,因为我这里是单张,所以不用显示
:show-file-list="false"
//上传成功时调用的钩子
:on-success="handleAvatarSuccess"
//上传图片前的验证
:before-upload="beforeAvatarUpload"
ref="myUpload">
<img v-if="imageUrl" :src="this.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
- js代码
data() {
return{
imageUrl:''
}
}
methods: {
//上传成功后的调用
handleAvatarSuccess(response) {
// ’/storage/image/‘ 这个路径为你后端存储图片的软连接地址
this.imageUrl = '/storage/image/'+response.filepath;
this.create_form.picture = this.imageUrl
console.log(this.imageUrl)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
//清空上传图片列表
clearFiles(){
this.$refs['myUpload'].clearFiles();
}
}
- 后端代码
进行代码之前需要运行php artisan storage:link ,创建一个软链接
命令执行完毕后,就会在项目里多出一个 public/storage,这个 storage 就是一个软链接,它指向 storage/app/public 目录。public/storage(软连接) → storage/app/public
然后就可以用地址直接访问public里面的照片了
//建立你的上传路由
Route::group(['namespace' => 'Admin' , 'prefix' => 'admin' ,],function (){
Route::post('upload','UploadController@upImage')->name('admin.upload');
});
//控制器代码
class UploadController extends Controller
{
public function upImage(Request $request){
$image = $request->file('file');
if ($image) {
//获取文件的原文件名 包括扩展名
$oldname= $image->getClientOriginalName();
//获取文件的扩展名
$extendname=$image->getClientOriginalExtension();
//获取文件的类型
$type=$image->getClientMimeType();
//获取文件的绝对路径,但是获取到的在本地不能打开
$path=$image->getRealPath();
//要保存的文件名 时间+扩展名
$filename=date('Y-m-d') . '/' . uniqid() .'.'.$extendname;
//保存文件 配置文件存放文件的名字 ,文件名,路径
$bool= Storage::disk('uploadimg')->put($filename,file_get_contents($path));
//return back();
return json_encode(['status'=>1,'filepath'=>$filename]);
} else {
return response()->json([], 500, '文件未通过验证');
}
}
}
运行上传过程会出现419错误是因为Laravel有一个csrf验证
你需要
- 关闭CSRF验证(不推荐)
进入项目目录 app/Http/Kernel.php文件,注释掉这句话
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\VerifyCsrfToken::class,
]
//
];
- 设置CSRF的白名单
将上传路由添加到 VerifyCsrfToken 中间件的 $except 属性来排除对这类路由的 CSRF 保护。
进入项目目录 app/Http/Middleware/VerifyCsrfToken.php文件
protected $except = [
//验证的路由
'admin/upload'
];
当你切换php启动服务端口号的时候,上传图片时会出现
net::ERR_CONNECTION_REFUSED
这时候你要检查el-upload元素action值的端口号是否是你重启服务的端口号