zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

uni-app+thinkphp: 单图片文件上传(hbuilderx 3.7.3)

App文件上传 图片 thinkphp uni 3.7 HBuilderX
2023-09-14 09:01:15 时间

一,js代码:

<template>
    <view>
        <image mode="aspectFit" :src="imageSrc" @tap="chooseImage" 
        style="background: gray; width:200rpx;height:200rpx;margin-left: 275rpx;" />
        
        <button style="width:550rpx;margin-left: 100rpx;margin-top: 30rpx;" 
        type="primary" @tap="chooseImage">选择图片</button>
        
        <button style="width:550rpx;margin-left: 100rpx;margin-top: 30rpx;"  
        type="primary" @tap="upload">上传图片</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imageSrc:'',
            }
        },
        methods: {
            chooseImage(){
               uni.chooseImage({
                    count: 1,
                    sizeType:['copressed'],
                    success:res => {    //注意此处的写法,否则可能不能预览
                        //只有一张图片, 输出下标[0], 直接输出地址
                        var imgFile = res.tempFilePaths[0];
                        console.log(imgFile);
                        this.imageSrc = imgFile;
                    }
                })
            },
            
            upload(){

        console.log("filepath:");
        console.log(this.imageSrc);
        if (this.imageSrc == '') {
            //console.log();
            let tip = '未选择图片文件!';
            uni.showToast({
                title:tip,
                icon:"error",
            })
            return false;
        } 
        uni.uploadFile({
            url: '/api/goods/uploadone', //接口地址
            filePath: this.imageSrc,
            name: 'file',
            formData: {
                'user': 'test'
            },
            success: (res) => {
                let data =  JSON.parse(res.data);
                if (data.code == 0){
                    alert("上传成功:"+data.data.url);
                } else {
                    alert("上传出错:"+data.msg);
                }
            }
        });
            }
        }
    }
</script>

<style>

</style>

说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取: https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明:作者:刘宏缔 邮箱: 371125307@qq.com

二,服务端php代码:

class Goods extends BaseController
{
    //上传单一文件
    public function uploadOne() {

         $file = request()->file('file');
         if (is_null($file)) {
               return Result::ErrorCode(11,'没有文件上传');
         }

         $size = $file->getSize();
         $path = $file->getPathname();
         if (is_file($path)){
             $ext = strtolower($file->getOriginalExtension());
             if (trim($ext) == '') {
                 return Result::ErrorCode(1012,'文件名有错误');
             }
             $newName = date('YmdHis').rand(1000,9999);
             $newName = $newName . '.' . $ext;

             $destDir = "/var/www/html/head";
             //移动文件到指定目录,并重命名为新文件名
             $file->move($destDir, $newName);

            //$user = $this->request->param('user','','string');
            //  var_dump($user);

            $imgUrl = "http://file.lhdtest.com/head/".$newName;
            $res = ['url'=>$imgUrl];
            return Result::Success($res);
        } else {
              return Result::ErrorCode(1011,'文件不存在');
         }
    }

三,测试效果:

四,查看hbuilderx的版本: