fastadmin用小程序端上传多张图到服务器

2024-10-08 15:18:39

小程序码

扫一扫在手机上看此文章

文章目录

热门文章

vscode里如果出现中文空格标出黄色突出显示，怎么去掉？ 2477

php基础入门课程资料文档课件实战源码 2161

vscode插件code runner详细配置说明 1644

wordpress主题开发文档资料下载 1626

php进阶课程文档资料下载 1206

使用ffmpeg将mp4格式转为m3u8 1057

fastadmin监听或重写删除编辑按钮事件 939

phpstudy怎么手动安装php8.3.0版本？ 920

整理下php学员遇到的一些问题 899

推荐2款mac电脑里非常好用的php集成开发环境 888

### 小程序端代码
uploadfile函数：选择图片，然后循环调用uploadfilepath方法，达到上传多张的效果

uploadfilepath函数：上传图片专用的，并且处理上传完成后要做的事情（例如显示在页面里）

```js
,
  uploadfile(){
    let that=this
    //选取图片
    wx.chooseImage({
      count: 3,
      sizeType: ['original'],//原图
      sourceType: [ 'album','camera'],//支持选取图片      
      success (res) {        
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths[0];
          for (const key in res.tempFilePaths) {
            if (Object.hasOwnProperty.call(res.tempFilePaths, key)) {
              const element = res.tempFilePaths[key];
              that.uploadfilepath(element)
            }
          }
      }
    })
  },
  uploadfilepath(tempFilePaths){
    //上传图片
    wx.uploadFile({
      //请求后台的网址
      url: gb.apidomain +'/common/upload',
      //小程序本地的路径
      filePath: tempFilePaths,
      //后台获取我们图片的key
      name: 'file',
      //额外的参数formData
      formData: {
          'from': 'xcx'
      },
      header: {
        token:gb.token
      },
      success: function (res) {
      //上传成功
        console.log(res,'success');
      },
      fail: function (res) {
        console.log(res,'fail');
      },
    })
  }

```
注意：gb.apidomain是服务器端的域名，formData里可以附带额外参数，count指的是最多一次能上传几张

### php后端代码
后端代码是fastadmin自带的，不需要我们写了，路径是application/api/controller/Common.php里的upload方法
![](https://resource.maoshu.fun/storage/default/20241008/imagee606db4890b2bca92df3caa8557a37b2a65008b5.png?e=1743737482&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:_yQygkKzCbUYYq4TzGhM8TDULX8=)

上传完成的结果：

![](https://resource.maoshu.fun/storage/default/20241008/image7b16c0065f4510d47a42285b3d2f0d6f7da3dfff.png?e=1743737482&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:HVeSBxGIrvJLifxtmbyDJfEa-HE=)