微信小程序上传图片到tp

大得369

已于 2023-04-10 07:10:17 修改

阅读量209

点赞数

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

于 2021-09-01 15:00:37 首次发布

本文链接：https://blog.csdn.net/qq_34631220/article/details/120040084

版权

php 同时被 3 个专栏收录

76 篇文章 2 订阅

订阅专栏

39 篇文章 1 订阅

订阅专栏

小程序

11 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中使用WXML、JS和PHP代码实现图片选择、上传及服务器存储，包括`wx.chooseImage`、`wx.uploadFile`接口的使用以及后端PHP处理图片上传的示例。

摘要由CSDN通过智能技术生成

小程序wxml部分

                         wxml部分
                        <view class="weui-uploader__bd">
                            <view class="weui-uploader__files" id="uploaderFiles">
                                <block wx:for="{{files}}" wx:key="*this">
                                    <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
                                        <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
                                    </view>
                                </block>
                                <view class="weui-uploader__file">
                                    <image class="weui-uploader__img" src="http://www.dade.com:8080/static/img/369.png" mode="aspectFill" />
                                </view>
                                <view class="weui-uploader__file weui-uploader__file_status">
                                    <image class="weui-uploader__img" src="http://www.dade.com:8080/static/img/369.png" mode="aspectFill" />
                                    <view class="weui-uploader__file-content">
                                      <view class="weui-loading"></view>
                                    </view>
                                </view>
                            </view>
                            <view class="weui-uploader__input-box">
                                <view class="weui-uploader__input" bindtap="chooseImage"></view>
                            </view>
                        </view>

小程序js代码

                       


小程序js部分
wx.chooseImage({
      success (res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'http://www.dadesa.com:8080/index/imgswx', //仅为示例，非真实的接口地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            'user': 'test'
          },
          success (res){
            const data = res.data
            console.log(res)
            //do something
          }
        })
      }
    })

php tp部分

/**
     * 微信小程序上传图片
     * */
    public function imgswx(Request $request){
        $file = $request->file('file');
        $savename = \think\facade\Filesystem::disk('public')->putFile( 'img', $file);
        $savename = "/storage/".$savename;
        $savename = str_replace("\\",'/',$savename);
        return json($savename);
    }