H5的上传文件实现--thinkphp8与uniapp

        首先在thinkphp8中建立一个h5的应用，再在下面建立控制器文件夹controller，再在controller文件夹下面建立一个Index.php文件。在Index.php文件写入代码如下

<?php

namespace app\h5\controller;

class Index {
  
    public function upload(){

        $file = request()->file('image');

        $savename = \think\facade\Filesystem::disk('h5_public')->putFile( 'topic', $file);
    }
}

        在config文件夹下面的filesystem.php文件里面修改如下

<?php

return [
    // 默认磁盘
    'default' => 'local',
    // 磁盘列表
    'disks'   => [
        'local'  => [
            'type' => 'local',
            'root' => app()->getRuntimePath() . 'storage',
        ],
        'public' => [
            // 磁盘类型
            'type'       => 'local',
            // 磁盘路径
            'root'       => app()->getRootPath() . 'public/storage',
            // 磁盘路径对应的外部URL路径
            'url'        => '/storage',
            // 可见性
            'visibility' => 'public',
        ],
        'h5_public' => [
            // 磁盘类型
            'type'       => 'local',
            // 磁盘路径
            'root'       => app()->getRootPath() . 'public/h5/storage',
            // 磁盘路径对应的外部URL路径
            'url'        => '/storage',
            // 可见性
            'visibility' => 'public',
        ],
        // 更多的磁盘配置信息
    ],
];
        为何要在filesystem.php增加h5_public的配置呢？因为上传的文件分为全局和不同应用各自管理会更加多样，也更加符合用户习惯在单渠道操作的习惯，这里的应用对应上渠道，渠道比如h5，抖音小程序，PC端等等。

        上传文件的配置在各个应用中单独配置的话，会使全局配置失效。如果要实现全局配置，需要在每个应用的配置下增加一模一样的全局配置。路由在应用下配置也会使得全局配置路由文件失效。中间价则配置应用下中间件则不会使全局中间件失效，是个例外。

        在uniapp下写入如下代码

<template>
    
    <view class="content">
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <uni-file-picker
            v-model="imageValue" 
            fileMediatype="image" 
            mode="grid" 
            @select="select" 
            @progress="progress" 
            @success="success" 
            @fail="fail" 
        />
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'abcd',
                imageValue:[],
            }
        },
        onLoad() {
            
        },
        methods: {
            // 获取上传状态
            select(e){
                console.log('选择文件：',e);
                uni.uploadFile({
                    url: getApp().globalData.server_url+'index/upload', //仅为示例，非真实的接口地址
                    filePath: e.tempFilePaths[0],
                    name: 'image',
                    formData: {
                        // 'user': 'test'
                    },
                    success: (uploadFileRes) => {
                        console.log(uploadFileRes.data);
                    }
                });
            },
            // 获取上传进度
            progress(e){
                console.log('上传进度：',e)
            },
            
            // 上传成功
            success(e){
                console.log('上传成功')
            },
            
            // 上传失败
            fail(e){
                console.log('上传失败：',e)
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 46rpx;
        color: #8f8f94;
    }
</style>
        注意uni-file-picker组件可以在H5上使用，但是不可以在抖音小程序上使用，运行页面如下