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

2024-10-08 15:18:39

小程序码

文章目录

热门文章

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

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

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

文档：一个案例学会fastadmin插件开发 148

php基础入门课程资料文档课件 134

表单验证：密码和确认密码的验证和文字提示 76

百题斩：用递归方式扁平化嵌套数组 67

百题斩：字符串的逆序函数 60

案例代码：用油猴脚本统计b站课堂课程总时长 59

使用ffmpeg把mp4转为加密后的m3u8文件 55

### 小程序端代码
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=1732495009&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:uuKhdHFAvLfz66Lst4cVzo1YU3U=)

上传完成的结果：

![](https://resource.maoshu.fun/storage/default/20241008/image7b16c0065f4510d47a42285b3d2f0d6f7da3dfff.png?e=1732495009&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:o_XOOHsOBLk75SLi9mehIufS3SQ=)