• 首先,要去七牛云申请一个账号,并且要有一个已经备案的域名。
    然后就可以开始写程序了。
  • 使用以下代码安装laravel6.X的最新版本
composer create-project --prefer-dist laravel/laravel picture "6.*"
  • 因为本次使用前后端不分离开发,所以不用安装laravel-cors跨域包
    前端代码一个大佬给写好了,所以直接贴代码
    <div id="app">
        <div class="upload">
            <el-upload class="upload-demo" drag action= "http://127.0.0.1:5000/up_photo" :on-success="handleAvatarSuccess">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
            </el-upload>
        </div>
        <div class="input">
            图片链接
            <el-input v-model="back_url"></el-input>
        </div>
    </div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            back_url: '',
            file: '',
        },

        methods: {
            handleAvatarSuccess(response, file, fileList) {
                const item = this;
                console.log(response+file+fileList);
                this.back_url = response;
            }
        },
    })
</script>
  • PS:只展示关键代码
    使用以下命令安装七牛云的SDK,用来上传文件
composer require itbdw/laravel-storage-qiniu

config/app.php 里面的 providers 加上一行 itbdw\QiniuStorage\QiniuFilesystemServiceProvider::class,

config/filesystems.php 里面的 disks数组加上

'qiniu' => [
            'driver'    => 'qiniu',
            'domain'    => 'xxxxx.bkt.clouddn.com',  //你的七牛域名
            'access_key'=> '',    //AccessKey
            'secret_key'=> '',   //SecretKey
            'bucket'    => '',    //Bucket名字
        ],
  • 将前端页面重命名为picture.blade.php
    然后复制到resoures/views里面
  • 修改routes/web.php
Route::get('/', function () {
    return view('picture');
});
  • 输入以下命令新建一个图片上传控制器
php artisan make:controller UploadController
  • 因为有CSRF问题,需要在routes/api.php里面增加一个上传路由
Route::post('up','UploadController@uploadpicture');
  • 在新的控制器里增加一个上传方法,代码如下
public function uploadpicture(Request $request)
    {
        $this->validate(request(), [
            'file' => 'required|image',
        ]);
        if ($request->hasFile('file') && $request->file('file')->isValid()) {
            $path = md5(time() . rand(100000, 999999)) . $request->file('file')->getClientOriginalName();
            $img = 'http://picture.105577.xyz/'.$path;
            $res = \Storage::disk('qiniu')->writeStream($path, fopen($request->file('file'), 'r'));
            if ($res) {
                return $img;
            } else {
                return '图片上传错误';
            }
        }
    }
  • 最后成功的效果
    成功图片
Last modification:September 3rd, 2020 at 05:50 pm
如果觉得我的文章对你有用,请随意赞赏