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

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

函数加载成功

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

猜你喜欢