微信小程序文件上传至七牛云（laravel7）

1 wxml:

<view>
  <form bindsubmit="dopost">
    <view>
      <label>真实姓名</label>
      <input name="truename" value="{{ userinfo.truename }}" />
    </view>
    <view>
      <label>身份证号</label>
      <input name="card" type="idcard" value="{{ userinfo.card }}" />
    </view>
    <view class="tip-msg">
      添加手持身份证照片
      <text>(照片仅用于身份认证)</text>
    </view>
    <view class="uppic" bind:tap="upfile">
      <text class="iconfont icon-jiahao"></text>
    </view>
    <view class="imglist">
      <block wx:for="{{upfile}}" wx:key="upfile">
        <image src="{{item}}" />
      </block>
    </view>
    <view class="sendbtn">
      提交信息
      <button type="primary" form-type="submit">提交信息</button>
    </view>
  </form>
</view>                    

　2　wx.js:

    // pages/page/page.js
    Page({
        /**
         * 页面的初始数据
         */
        data: {
            upfile:[]
        },
    //图片上传
    upfile:function(res){
        let that = this
        let file = []
        // 本地图片
        wx.chooseImage({
        count: 3,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
            // tempFilePath可以作为img标签的src属性显示图片
            let tempFilePaths = res.tempFilePaths;
            tempFilePaths.map(filepath=>{
            wx.uploadFile({
                //   发送的网址
                url: 'http://www.yan.com/api/xcx/xcxImg',
                filePath: filepath,
                // 发送的文件
                name: 'file',
                success (ret){
                let json = JSON.parse(ret.data)
                //   console.log(json)
                // 将返回的文件追加至file空数组
                file.push(json.data)
                //   设置data数据中的file
                that.setData({
                    upfile:file
                })
                },fail(res){
                wx.showToast({
                    title: '请求失败',
                    icon:"error"
                })
                }
            })
            })
        }
        })
    },

    })

wxss

/* pages/page/page.wxss */
page {
    background-color: #fff;
  }

  .imglist image{
    width: 200rpx;
    height: 200rpx;
  }
  .tip {
    background-color: #fff3cd;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 14px;
    color: #fb6951;
    padding-left: 10rpx;
  }
  .tip text:nth-of-type(1) {
    margin-right: 10rpx;
  }
  form view {
    padding: 30rpx;
    display: flex;
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 1px solid #eeeeee;
  }
  form view:nth-last-of-type(1){
    border: none;
  }
  form view label {
    margin-right: 30rpx;
  }
  form view input {
    height: 80rpx;
    line-height: 80rpx;
  }
  .tip-msg{
    color: #a4a4a4;
  }
  .tip-msg text{
    margin-left: 10rpx;
    font-size: 12px;
  }
  .uppic{
    margin-left: 10rpx;
    margin-top: 10rpx;
    width: 100rpx;
    height: 100rpx;
    border: 1px dashed #a4a4a4;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sendbtn{
    position: fixed;
    bottom: 0px;
    width: 750rpx;
    height: 100rpx;
    background: #21b97a;
    padding: 0;
    margin: 0;
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }

  .sendbtn button {
    width: 100%;
    height: 100rpx;
    opacity: 0;
    position: absolute;
    top: 0;
  }

3  laravel7  api.php书写路由　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Route::group(['namespace'=>'xcx'],function (){

//图片
    Route::post('xcx/xcxImg','LoginController@xcxImg');

});

4  然后composer下载七牛云

composer require itbdw/laravel-storage-qiniu

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

itbdw\QiniuStorage\QiniuFilesystemServiceProvider::class,

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

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

 'qiniu' => [
            'driver'    => 'qiniu',
            'domain'    => 'r3y7oifgb.hn-bkt.clouddn.com',  //你的七牛域名
            'access_key'=> '7Gu_5HzqSHJB3nLBz51pQN8oJBfqeGwd3kQ-vCNX',    //AccessKey
            'secret_key'=> 'frzqcOjOhL55eIMXQSLIfO_apMHrs0fr8jjklKDt',   //SecretKey
            'bucket'    => 'yanbingexam',    //Bucket名字，即七牛云存储空间名称
        ],

7 ：控制器进行调用

  public function xcxImg(){
        $disk = \Storage::disk('qiniu'); //使用七牛云上传
        $time = date('Y-m-d');//文件上传时间
        $filename = $disk->put($time, request()->file('file'));//上传 这里的image是前端的name值，自己来定
        if(!$filename) {
            return ['code' => 500, 'meg' => 'error', 'data' => []];
        }
        $img_url = $disk->getDriver()->downloadUrl($filename); //获取下载链接
        return ['code' => 200, 'meg' => '上传成功', 'data' => $img_url];
    }

8：七牛云进行查看，切记桶空间必须是公开的，要不上传不上去

参考：

（1）如果上传至本地图片参考以下代码：

 public function xcxImg(Request $request)
   {
        if ($request->hasFile('file')){
            // 上传
         $ret = $request->file('file')->store('', 'img');
           $pic = '/uploads/img/' . $ret;
           $disk =\Storage::disk('qiniu'); //使用七牛云上传
            $time = date('Y-m-d');
            $filename = $disk->put($time, request()->file('file'));//上传 这里的image是前端的name值，自己来定
            if(!$filename) {
                return ['code' => 500, 'meg' => 'error', 'data' => []];
            }
            $img_url = $disk->getDriver()->downloadUrl($filename); //获取下载链接
          return ['code' => 200, 'meg' => '上传成功', 'data' => $img_url];
       }

   }

（2） 如需将图片保存至本地参考以下博客

https://www.cnblogs.com/xiaoyantongxue/p/15679469.html

   public function store(Request $request)
    {
        //
        $data = $request->post();
//        将文件上传至本地
        $img = $request->file('img');
        if (!empty($img)){
            $img = "/".$request->file('img')->store(date('y/m/d')."/".'img');
            $data['img'] = $img;
        }
//        文件上传至七牛云
        $disk = \Storage::disk('qiniu'); //使用七牛云上传
        $time = date('Y-m-d');//文件上传时间
        $filename = $disk->put($time, request()->file('img'));//上传 这里的image是前端的name值，自己来定
//        验证
        $this->validate($request, ['name' => 'required', 'zhicheng' => 'required', 'img' => 'required'],
            ['name.required' => '医生姓名不可以为空', 'zhicheng.required' => '医生职称不可以为空', 'img.required' => '图片不可以为空']);
//添加入库
       $res = Doctor::create($data);
        if ($res) {
            return redirect(route('doctor.index'))->with(['success' => '添加成功']);
        }
        return redirect(route('doctor.create'))->withErrors(['error' => '添加失败']);
    }