上传并显示图片--thinkphp8与uniapp

        首先创建一张数据库表来存放图片

CREATE TABLE `am8_head` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8

        编写后端接口，thinkphp8用的MVC模式，不过其中V，用的uniapp代替，编写后端接口其实是写控制器和模型。模型代码如下

<?php

namespace app\mp_toutiao\model;

use think\Model;

class Head extends Model {
   
}

        控制器代码如下

<?php

namespace app\mp_toutiao\controller;

use app\mp_toutiao\model\Head;

class Index

{

        public function addHead()
        {

                $head = new Head;
        
                $file = request()->file('image');

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

                $head->name = $savename;
                $head->save();
        
                return json([
                    'code' => 1,
                    'sub_code' => 0,
                    'msg' => '',
                    'data' => []
                ]);

        }

        public function getHeadOne()
    {
        $head = Head::limit(1)->order('id desc')->find();
        $search = '\\';
        $replace = '/';
        $replacedString = str_replace($search, $replace, $head->name);
        return json([
            'code' => 1,
            'sub_code' => 0,
            'msg' => '',
            'data' => 'http://mp.toutiao.am8.com/mp_toutiao/storage/'.$replacedString
        ]);
    }

}

        其中addHead是添加图片的接口，模型写入数据到数据库有3个方法，分别是save，saveAll和静态方式写入的create。看$head->save();这句，用的是save方法。getHeadOne是获取图片的接口。

        uniapp代码如下

<template>
    <view>
        <image class="logo" :src="headUrl"></image>
        <button @click="addHead">新增头像</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                headUrl:'',
            }
        },
        onLoad() {
            uni.request({
                url:getApp().globalData.server_url+"index/getHeadOne",
                method:"GET",
                success:(result) => {
                        console.log(result);
                            if (result.data.code === getApp().globalData.my_success_code) {
                                this.headUrl = result.data.data;
                            } else {
                                if (result.data.code === getApp().globalData.my_fail_code) {
                                    uni.showModal({
                                        title: '错误',
                                        content: result.data.msg, // 显示后端返回的错误信息
                                        showCancel: false // 不显示取消按钮
                                     });
                                }
                            }
                    }
                ,
                fail:function(error){
                    console.log(error);
                }
            })
        },
        methods: {
            addHead()
            {
                uni.chooseImage({
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        uni.uploadFile({
                            url: getApp().globalData.server_url+'index/addHead', //仅为示例，非真实的接口地址
                            filePath: tempFilePaths[0],
                            name: 'image',
                            formData: {
                                                           },
                            success: (uploadFileRes) => {
                                console.log(uploadFileRes.data);
                            }
                        });
                    }
                });
            }
        }
    }
</script>

<style>
    .logo {
        height: 200rpx;
        width: 200rpx;
    }
</style>
        注意image组件的src属性接收的是类似http://mp.toutiao.am8.com/mp_toutiao/storage/topic/20241006/c76bccaa4c102753df3824ccd8841e63.png这样的URL。所以上面后端接口才做了字符替换

        在H5中效果如下

        抖音小程序效果如下