前端关于微信小程序上传图片调用后端接口以及form表单提交给后台的功能实现_小程序表单上传,有图片/视频+其他内容怎么提交

图片上传功能，首先在wxml文件中加一个按钮以及图片回显的img

wxml页面的代码：.

 <block>
         <input style="display:none" name = "orderImage" value='{{showImage_url}}'></input>
          <button bindtap="uploadimg">+</button>
            
            <image src='{{showImage_url}}'></image>  
              
          </block>
1
2
3
4
5
6
7

其次是JS文件

/*
   *图片上传
   **/
  uploadimg: function() {
    var that = this;
    //选择图片
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths[0]
        that.setData({
          showImage_url: tempFilePaths
        })
        //图片上传
        wx.uploadFile({
          url: 'http://localhost/common/uploadImg',//调用后台接口的路径
          method:'POST',
          filePath: that.data.showImage_url,
          name: 'file',//此处注意要与后台保持一致
          header: {
            "Content-Type": false,
          },
          //formdata:adds,
          success: function(res) {}
        })
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

注意在page的data中

data: {
  showImage_url: '',
},
1
2
3

这样基本一个图片上传及回显的功能就做完了，如果需要表单提交的话在JS中添加如下代码

formsubmit: function(e) {
  this.setData({
    orderImage: e.detail.value.orderImage,
    orderText: e.detail.value.orderText
  })
  const wxreq = wx.request({
    url: 'http://localhost/app/submitTask',//后台接口路径
    data: {
      'orderText': this.data.orderText,
      'orderImage': this.data.showImage_url
    },
    method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
    header: {
      'Content-Type': "application/x-www-form-urlencoded",
      'Cookie': 'SESSION=' + wx.getStorageSync("sessionId")
    }, // 设置请求的 header 
    success: function (res) {
      console.log("提交任务成功");
      wx.navigateTo({//页面跳转
        url: '/pages/index/index',
      })
      wx.showModal({//提示弹框
        title: '提示',
        content: '提交成功，请耐心等待审核。',
        showCancel: false, //是否显示取消按钮 
        fail: function (res) { }, //接口调用失败的回调函数
        complete: function (res) { }, //接口调用结束的回调函数（调用成功、失败都会执行）
      })
    },
    fail: function () {
      console.log("请求数据失败");
    }
  })
  
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

##页面上记得添加form表单，具体如下

<view class='box'>
   <view class='boxcon'>
     <text class='title'>文本内容:</text>
     <view class='txt'>
       <textarea name="orderText" placeholder="请输入" type="text"> </textarea>
     </view>
     <text class='title'>图片内容:</text>
     <view class='imgbox'>
     <block>
      <input style="display:none" name = "orderImage" value='{{showImage_url}}'></input>
       <button bindtap="uploadimg">+</button>
         <image src='{{showImage_url}}'></image>  
           
       </block>
     </view>
   </view>
 </view>
</view>
<view class='pagefoot'>
 <button class='btnblock'   form-type="submit">提交</button>
</view>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

##data中添加
data: {
orderText: “”,
orderImage: “”,
showImage_url: ‘’,
},
##这样一个基本的图片上传并提交给后台的功能就做完啦