laravel+vue+element 下的 后端上传图片较前端上传复杂一些

1. 首先vue模版页面,写好模版

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

action="/photos"对应传值的地方,所以对应要建photos控制器和模版
前端:

//图片上传成功之后
            handleAvatarSuccess(res, file) {
                this.form.image = res.image_url;
            },
            //图片上传之前
            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;
            }

前端任务完成
后端:
a. 路由:

//后端上传图片
Route::resource('photos', 'PhotoController')->only('store');

b.控制器:

/***
     * 上传图片
     * @param Request $request
     */
    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 * 2;
            $size = $request->file('file')->getClientSize();
            if ($size > $max_size) {
                return response()->json(['status' => 0, 'msg' => '文件大小不能超过2M']);
            }

            //original图片
            $path = $request->file->store('public/images');

            //绝对路径
            $file_path = storage_path('app/') . $path;

            //保存到七牛
            qiniu_upload($file_path);

            //这里直接是image 不需要插入其他表格
//            //插入图片表
//            $photo = Photo::create(['image' => 'http://luvxia.com//' . basename($file_path)]);

            return ['status' => 1, 'image' => basename($file_path), 'image_url' => 'http://luvxia.com/' . basename($file_path)];
        }
    }

c. 辅助函数,先跑七牛命令,再建函数
终端先输入curl -sS https://getcomposer.org/installer | php
再输入php composer.phar require qiniu/php-sdk
--创建HTTP-Helpers-qiniu.php
--引入七牛:

<?php

use Qiniu\Auth;

// 引入上传类
use Qiniu\Storage\UploadManager;

/**
 * 上传到七牛
 * @param $filePath 文件的绝对路径
 * @return array ['文件信息', '错误信息']
 */
function qiniu_upload($file_path)
{
    $accessKey = '';
    $secretKey = '';
    // 要上传的空间
    $bucket = '';
    // 构建鉴权对象
    $auth = new Auth($accessKey, $secretKey);
    // 生成上传 Token
    $token = $auth->uploadToken($bucket);
    // 上传到七牛后保存的文件名
    $key = basename($file_path);
    // 初始化 UploadManager 对象并进行文件的上传
    $uploadMgr = new UploadManager();
    // 调用 UploadManager 的 putFile 方法进行文件的上传
    $uploadMgr->putFile($token, $key, $file_path);
    unlink($file_path);
}

d.注册辅助函数,在composer.json中注册函数,autoload中加files

"autoload": {
  "files": [
      "app/Http/Helpers/qiniu.php"
    ]
}

e. 执行辅助函数,终端输入命令
composer dump-autoload
上传完成