微信小程序多图上传tp6接口

最新推荐文章于 2024-02-18 11:30:35 发布

that_were_you

最新推荐文章于 2024-02-18 11:30:35 发布

阅读量556

点赞数

分类专栏： php 文章标签：小程序 thinkphp

本文链接：https://blog.youkuaiyun.com/that_were_you/article/details/119610656

版权

php 专栏收录该内容

7 篇文章

订阅专栏

首先是前端样式

ui样式所以见名思意就好

 <l-image-picker count="9" bind:linchange="onChangeTap" />

然后是js中的data里

//图片地址
urls: [],

接下来是js方法

思路是循环上传

onChangeTap(e){
                
                // console.log(e.detail);
                let filePath = e.detail.current;
                // console.log(tempFilePaths);
                //定义一个空数组，进行存放上传图片url
                var urlArr = [];
                for( let index=0;index<filePath.length;index++){
                        wx.uploadFile({
                                filePath: filePath[index],
                                name: 'file',
                                url: '接口地址',
                                header:{'token':wx.getStorageSync('token')},
                                success:res=>{
                                        //json解码
                                        const data = JSON.parse(res.data);
                                        //追加进data的数组中
                                      urlArr.push(data.url)
                                      this.setData({
                                        urls: urlArr
                                      })
                              }
                              })
 
                }
                
        },

下面是API的接口

app/server/Oss.php中

use OSS\OssClient;
use OSS\Core\OssException;
public function getOss($filePath)
    {
 
        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
        $accessKeyId = "";
        $accessKeySecret = "";
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        $endpoint = "";
        // 设置存储空间名称。
        $bucket= "";
        // 设置文件名称。
        //这里是由sha1加密生成文件名 之后连接上文件后缀，生成文件规则根据自己喜好，也可以用md5
        //前面video/head/ 这是我的oss目录
        $fileName = date('Y-m-d', time()) . '/' . md5(time() . rand(1111, 9999999)) . '.png';
 
        try {
            $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
            $result = $ossClient->putObject($bucket, $fileName, file_get_contents($filePath));
 
        } catch (OssException $e) {
            print $e->getMessage();
        }
//        dump($result);dd();
        return $result['info']['url'];
    }

控制器中


public function upLoad(Request $request)
    {
        //要上传文件的临时路径
        $filePath=$_FILES['file']['tmp_name'];
        //阿里云上传对象存储
        $fileName=(new OssServer())->getOss($filePath);
        return json(['error_code'=>0,'url'=>$fileName,'msg'=>'上传成功']);
    }

路由必须是POST 切记