Laravel+vue+element-ui上传图片_element和laravel上传图片

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 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();
            }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 后端代码
  进行代码之前需要运行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, '文件未通过验证');
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

运行上传过程会出现419错误是因为Laravel有一个csrf验证
你需要

1. 关闭CSRF验证（不推荐）
   进入项目目录 app/Http/Kernel.php文件，注释掉这句话

 protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\VerifyCsrfToken::class,
        ]
        //
    ];
1
2
3
4
5
6

2. 设置CSRF的白名单
   将上传路由添加到 VerifyCsrfToken 中间件的 $except 属性来排除对这类路由的 CSRF 保护。
   进入项目目录 app/Http/Middleware/VerifyCsrfToken.php文件

 protected $except = [
        //验证的路由
        'admin/upload'
    ];
1
2
3
4

当你切换php启动服务端口号的时候，上传图片时会出现

net::ERR_CONNECTION_REFUSED
1

这时候你要检查el-upload元素action值的端口号是否是你重启服务的端口号