微信小程序 form表单中提交图片到数据库

问题描述

最近自己在写小程序前端,其中有个地方是form表单中要上传图片到数据库,form表单中的其他数据都可以上传,照片上传不了

问题出现的环境背景及自己尝试过哪些方法

尝试用过uploadFile但是没有成功,问题在哪里也不清楚

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
wxml
<view class="section section__one">

<view class="section__title">联系电话:</view>
<view class='cells'>
  <input class="cell" name="contact_info" placeholder="请输入联系电话" />
</view>

</view>
<view class="add-section section__img">

<view class='page-section-title'>添加图片:</view>
<image class='Img' src='../../../images/addImg.jpg'></image>  
<block  wx:for="{{img_arr}}" wx:key="*this">  
  <imag class='addImg' src='{{item}}'></image>  
</block>  

</view>

js

formSubmit: function (event) {

console.log(event.detail.value)
wx.request({
  url: '',
  header: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  method: "POST",
  data: {
    contact_info: event.detail.value.contact_info,
   },
   success: function (res) {
     console.log(res.data)
     if (res.data.status == 0) {
       wx.showToast({
         title: '提交失败',
         icon: 'loading',
         duration: 1000
       })
     } else {
       wx.showToast({
         title: '提交成功',
         icon: 'success',
         duration: 1000
       })
     }
   }
 })

},
upimg: function () {

var that = this;
if (this.data.img_arr.length < 3) {
  wx.chooseImage({
    sizeType: ['original', 'compressed'],
    success: function (res) {
      that.setData({
        img_arr: that.data.img_arr.concat(res.tempFilePaths)
      })
    }
  })
} else {
  wx.showToast({
    title: '最多上传三张照片',
    icon: 'loading',
    duration: 2000
  });
}

},

你期待的结果是什么?实际看到的错误信息又是什么?

希望大佬们能告诉我怎么办。。万分感谢

阅读 10.2k
3 个回答

建议楼主用base64去解决。
小程序有自带的APIFileSystemManager.readFile,可以在你的uploadFile里直接图片格式转换成base64,然后你甚至不需要用表单提交,将base64作为字符串传到后台,后台再将base64转换成图片格式就行了。

这种不应该查文档吗?
wx.uploadFile

wx.uploadFile({
    url,filePath, name,formData
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏