小程序上传图片 (Laravel与ThinkPHP)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.小程序端

如有其他疑问请参考官方文档

wxml

代码如下（示例）：

<button size="mini" bindtap="bindUploadTap">
选择图片
</button>
<image src="{{imgsrc}}"></image>

js代码

代码如下（示例）：

//选择上传图片
bindUploadTap:function(){
  let that = this
  wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths
      
      that.setData({
        imgsrc: tempFilePaths[0]
      })

      wx.uploadFile({
      //添加文件上传header头
        header: {
          'content-type': 'multipart/form-data'
        },
        url: 'https://www.com/api/v1/Index/upload_img', //仅为示例，非真实的接口地址
        filePath: tempFilePaths[0],
        name: 'file',//文件上传的name属性
        formData: {
          'user': 'test'
        },
        success: function (res) {
          var data = res.data
          console.log(res)
          //do something
        }
      })
    }
  })
},

2.Laravel 控制器代码（阿里云）

代码如下：

public function upload(Request $request)
    {
        //获取文件上传的路径
        $file=$request->file('file')->store('','upload');
        // 阿里云AccessKey和AccessKeySecret
        $accessKeyId = "********";
        $accessKeySecret = "*******";
        // Endpoint为上海，其它Region请按实际运营情况填写。
        $endpoint = "http://oss-cn-shanghai.aliyuncs.com";
        // 设置云存储空间名称。
        $bucket= "****";
        // 设置文件名称。
        $object = time().'.jpg';
        //使用错误抛出机制
        try{
            //阿里云OSS云存储
            $ossClient = new OssClient($accessKeyId,$accessKeySecret, $endpoint);
            //注意文件上传的路径  需要public_path()定位上传的文件的路径 相对路径可能会失效
            $ossClient->uploadFile($bucket, $object, public_path("/upload/".$file));
        } catch(OssException $e) {
            printf(__FUNCTION__ . ": FAILED\n");
            printf($e->getMessage() . "\n");
            return;
        }
        print(__FUNCTION__ . ": OK" . "\n");
    }

3.ThinkPHP控制器代码(七牛云)

代码如下：

	/**
     * 小程序图片上传并上传云存储（优化版）
     *
     * @param Request $request 依赖注入
     * @return \think\response\Json
     * @throws \Exception
     */
    public function upload(Request $request)
    {

        $file=$request->file('file');
        $savename = \think\facade\Filesystem::disk('public')->putFile( 'upload', $file);
        //替换图片路径中的转译符号"\"
        $picCover = str_replace('\\','/',$savename);
        //实例化七牛云文件上传基类
        $uploadMgr = new UploadManager();

        $accessKey="***************";
        $secretKey="***************";
        //上传的图片名称
        $key=time().".jpg";

        $auth = new Auth($accessKey, $secretKey);
        //上传的空间名称
        $token = $auth->uploadToken('tsave');
        //注意上传七牛云的文件路径
        list($ret, $error) = $uploadMgr->putFile($token, $key, $savename);
        //返回本地图片地址
        $local="http://www.week1.com/".$picCover;
        //返回七牛云图片地址
        $online="http://qsqh1b6f2.hn-bkt.clouddn.com/".$ret['key'];
        if ($ret){
            return json(['code'=>Config::get('app.msg.success'),'msg'=>'上传成功','url'=>$local,'online'=>$online]);
        }else{
            return json(['code'=>Config::get('app.msg.error'),'msg'=>'上传失败']);
        }
    }