vue2+vant2+Laravel7 实现多图上传到七牛云

后端接口

1、路由，在 routes/api.php 中

Route::resource('photos', 'PhotoController')->only('store');

2、创建对应控制器

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class PhotoController extends Controller
{
   
    /***
     * 上传图片
     * @param Request $request
     */
    public function store(Request $request)
    {
   
        if ($request->hasFile('file') && $request->file('file')->isValid()) {
   
            $path = $request->file->store('public/images');
            //上传到七牛云
            $file_path = storage_path('app/') . $path;

            qiniu_upload($file_path);
            return response()->json( 'https://image.xxx.com/' . basename($file_path));
        }
    }
}

3、定义辅助函数 qiniu.php

<?php
// 引入鉴权类
use Qiniu\Auth;
// 引入上传类
use Qiniu\Storage\UploadManager;

function qiniu_upload($filePath)
{
   
    $accessKey = "fAoxxxxxxxxxxxxxxxxxxxxxxxxx";
    $secretKey = "dkCxxxxxxxxxxxxxxxxxxxxxxxxx";
    $bucket = "xxxxx";
    $auth = new Auth($accessKey, $secretKey);
    $token = $auth->uploadToken($bucket);
    // 上传到七牛后保存的文件名
    $key = basename($filePath);
    // 初始化 UploadManager 对象并进行文件的上传。
    $uploadMgr = new UploadManager();
    // 调用 UploadManager 的 putFile 方法进行文件的上传。
    $uploadMgr->putFile($token, $key, $filePath);
    unlink($filePath);
}

这里需要安装七牛云的包，不会用的可以看七牛官网或在评论区给我留言。

前端

1、创建 vue2 项目，此步骤省略，自行完成。
2、安装 axios、vue2-toast 及 Vant2 前端 UI 框架，

npm install axios

npm install toast2-vue -S

npm i vant@latest-v2 -S

3、在 main.js 中，全部代码如下，供参考：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant'
import 'vant/lib/index.css'
import