laravel +vue+element-UI上传图片到七牛

比眉伴天荒 2022-04-16 02:09 245阅读 0赞

`element-UI`上传组件

<el-form-item label="缩略图" prop="photo_id">
                    <el-upload
                            class="avatar-uploader"
                            action="/photos"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="site.image" :src="site.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

`JS`部分

handleAvatarSuccess(res) {
    //                console.log(file);
                    this.site.image = res.image_url;
                    this.site.photo_id = res.photo_id;
                },
                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;
                }

我们上传的文件默认上传到`storage/app/public`目录中，我们并不能访问到这个目录，我们需要去创建软链指向这个文件夹

php artisan storage:link

报419错误，需要自己去排除`csrf`防护，在`Middleware\VerifyCsrfToken.php`中

protected $except = [
            '/photos',//上传的action
        ];

`public`目录会生成一个指向的软链目录文件夹`storage`  
后台`控制器`部分

public function store(Request $request)
    {
        if ($request->hasFile('file') and $request->file('file')->isValid()) {
        //数据验证
        $allow = array('image/jpeg', 'image/png', 'image/gif');
    
        $mine = $request->file('file')->getMimeType();
        if (!in_array($mine, $allow)) {
            return response()->json(['status' => 0, 'msg' => '文件类型错误，只能上传图片']);
        }
    
        //文件大小判断$filePath
        $max_size = 1024 * 1024 * 3;
        $size = $request->file('file')->getClientSize();
        if ($size > $max_size) {
            return response()->json(['status' => 0, 'msg' => '文件大小不能超过3M']);
        }
    
        //original图片,上传到本地
        $path = $request->file->store('public/images');
    
        //绝对路径
        $file_path = storage_path('app/') . $path;
    
        //保存到七牛
        qiniu_upload($file_path);//调用七牛全局
    
        //插入图片表
        $photo = Photo::create(['image' => 'http://image.holyzq.com/' . basename($file_path)]);
        return ['photo_id' => $photo->id, 'image' => basename($file_path), 'image_url' => 'http://image.holyzq.com/' . basename($file_path)];
    }

控制器缺少七牛的SDK和全局我们进行引入：

composer require qiniu/php-sdk

跑完后， 我们就可以写一个全局函数了，在`Http/Helpers`下创建一个`qiniu.php` 内容如下：

// 引入鉴权类
    use Qiniu\Auth;
    // 引入上传类
    use Qiniu\Storage\UploadManager;
    
    function qiniu_upload($filePath) {
    
    
    // 需要填写你的 Access Key 和 Secret Key
        $accessKey = "edj5WTd-8sURwN4qZD3YE2U9TDL4skSugNO6yevp";
        $secretKey = "4o06NtzXmP0Tu0F8P77Lk4oHSO40zYMae7yXHmUl";
        $bucket = "shop";
    
    // 构建鉴权对象
        $auth = new Auth($accessKey, $secretKey);
    
    // 生成上传 Token
        $token = $auth->uploadToken($bucket);
    
    // 要上传文件的本地路径
    //    $filePath = './php-logo.png';
    
    // 上传到七牛后保存的文件名
        $key = basename($filePath);
    
    // 初始化 UploadManager 对象并进行文件的上传。
        $uploadMgr = new UploadManager();
    
    // 调用 UploadManager 的 putFile 方法进行文件的上传。
        $uploadMgr->putFile($token, $key, $filePath);
    //删除本地图片
        unlink($filePath);
    }

`composer.json`中注册全局函数

"psr-4": {
                "App\\": "app/"
            },
            "files":[
                "app/Http/Helpers/qiniu.php"
            ]

然后我们重新加载这个命令行输入

composer dump-autoload

函数加载成功