在vue后台管理系统里面，有时候会遇到一个图片上传的功能，做这个功能的时候的思路是这样的：
1：首选由前端写一个图片上传的upload标签，选择本地的图片文件之后
2:调用后端给的接口，以二进制文件的形式传给后端服务器
3:服务器进行处理，处理完成之后将服务器的主机名加到图片名称的前缀上
4:返回一个有服务器主机+图片名称的在线就可以访问的链接给到前端
5:前端直接将在线链接路径渲染在界面显示图片。

前端：

<template>
<el-upload
  class="upload-demo"
  action="/index.php/api/goods/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture"
  :on-success="handleAvatarSuccess"

>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</template>

<script>

export default {
  name: 'goodsAdd',
  data() {
    return {
      fileList: '',
    };
  },
  methods: {
    //图片上传成功回调函数
    handleAvatarSuccess(res) {
      console.log(res.data);
      this.ruleForm.image = res.data;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }

  }
}
</script>

后端遇到的问题

解决：

 利用 composer 下载依赖包

composer require itbdw/laravel-storage-qiniu

打开 config 文件夹下的 app.php 文件，在 providers 中加入一下代码

itbdw\QiniuStorage\QiniuFilesystemServiceProvider::class,

打开 config 文件夹下的 filesystems.php 文件，在 disks 中加入一下代码

'qiniu' => [  
            'driver'    => 'qiniu',  
            'domain'    => '',  //你的七牛域名  
            'access_key'=> '',    //AccessKey  
            'secret_key'=> '',   //SecretKey  
            'bucket'    => '',    //Bucket名字，即七牛云存储空间名称  
        ],

在控制器里面进行上传

$file = $request->file();

        $file = $file['file'];

        $disk = \Storage::disk('qiniu');
        $time = date("Y-m-d");

        $fileName = $disk->put($time, $file);

        if (!$fileName) {
            echo '上传失败';
        }

        $img_url = $disk->getDriver()->downloadUrl($fileName);

        //返回连接地址
        return success('上传成功', $img_url);