小程序图片上传

使用wx.chooseImage选择图片,使用wx.uploadFile上传图片

注意事项:

1.每次只能上传一张图片,如需上传多张,需要配置多个选择框,与后台人员使用index识别对应的图片

2.uploadFile时,在真机上无法调用wx.showLoading,需要自己配置显得防误操作遮罩层

Page({
  changeStoreImg: function(e) {
    var that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original'], // 原图
      sourceType: ['album', 'camera'], // 来源 相册&相机
      success: function(res) {
        var $tempFilePaths = res.tempFilePaths[0]
        that._uploadimg($tempFilePaths) // 上传函数
      },
      fail: function() {}
    })
  },
  _uploadimg: function(filePath) {
    wx.uploadFile({
      url: '', //api接收地址
      filePath: filePath,
      name: 'file',
      formData: {},
      header: {},
      success: function(res) {
        //小程序request会自动转换数据,但是uploadFile不会转换数据
        if (res.data) {
          var $value = JSON.parse(res.data)
          console.log($value)
        }
      }
    })
  }
})


结合参考内容,小程序图片上传后端实现方案可从以下方面考虑。 ### 后端技术选择 Java 常被选为小程序的后端技术栈,因其是企业级开发的主流语言,适合用于开发小程序后端服务,以实现与小程序前端的交互,处理图片上传等业务逻辑[^2]。 ### 后端接口设计 需设计一个接收图片上传请求的接口,前端通过 `wx.uploadFile` 方法将图片发送到该接口。在示例代码中,前端请求的后端接口地址为 `"你的图片上传服务地址"`,后端要对该接口进行实现,接收前端传来的图片文件。示例代码如下: ```javascript // 前端代码,调用 wx.uploadFile 上传图片 for (let i = 0; i < urls.length; i++) { wx.uploadFile({ url: "你的图片上传服务地址", filePath: urls[i], name: "files", header: { "Content-Type": "multipart/form-data", }, success: function (res) { let datas = JSON.parse(res.data) if (datas.code === 200) { that.data.imgLists.push(datas.data) that.setData({ imgLists: that.data.imgLists, }) } else { wx.lin.showMessage({ content: '上传图片失败' }) } } }) } ``` ### 后端处理逻辑 - **接收文件**:后端接口要能够接收前端传来的文件流,解析请求中的文件数据。 - **文件存储**:可将接收到的图片存储到对象存储服务(OSS)中,OSS 具有高可靠性、高扩展性等优点,能有效存储大量图片。 - **响应处理结果**:后端处理完图片上传后,要给前端返回处理结果。如示例代码中,后端返回的数据包含 `code` 和 `data` 字段,前端根据 `code` 值判断上传是否成功。若 `code` 为 200 表示上传成功,前端将图片信息添加到 `imgLists` 中;否则提示上传失败。 ### 接口设计原则及验证 在设计后端接口时,要遵循接口设计的基本原则,同时考虑 Token 验证等安全机制,确保只有合法的请求才能上传图片,保障系统的安全性。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值