微信图片文件上传需要用到的两个API分别是：wx.chooseImage（选择本地文件） 和 **wx.uploadFile（上传文件）**将本地图片上传到服务器需要转换2次，首先是将本地的图片转换为服务器地址，其次是将这个服务器地址发送给后台接收。你从后台拿到一个方法a，你接收到这个方法a来处理图片，然后你再去后台拿到一个方法b，你接收到这个方法b来上传已经处理过的图片，就是这个意思。后台会给给一个文件上传的接口，专门用作本地文件和转换为服务器地址，例如：

除此之外， 还会给一个请求接口，也就是你需要发起请求，将这个图片提交给后台的接口（不放接口图片咯）

以上面的图片为例，一般在小程序里面有input输入框都会给外层包裹一个form表单，

form  bindsubmit='personIden'    view class='uploadFilesWrap'     view class="uploadTittle"上传工作证/view      view class='uploadText1'             text*/text             text仅限PNG、JPG格式，大小限制在3M以内/text        /view         view class='uploadText2'            text*/text             text 企业营业执照仅用于审核，不会向第三方透露，请放心上传/text        /view        view  bindtap='updata' class='myPhoto'            image src='{{url+uploadImg}}' wx:if='{{uploadImg}}' mode='scaleToFill' class='myImg'/image                               image src='/img/person/index/14.png' wx:else class='myImg'/image      /view    /view   button class='btn-upload' form-type='submit'           text提交审核/text    /button  /form    // 步骤：1，给from表单加一个bindsubmit='yourName',    //       2,在提交处最好用button按钮 给button按钮一个form-type='submit'     // 以上两步是成对出现的，配合使用的。

给图片框绑定一个函数，我这里绑定的updata，这个函数用于在你将本地的图片选中之后，把地址转换为服务器地址。我上面给form表单加了一个bindsubmit=‘personIden’，也相当于给form表单绑定的提交函数，只不过，这个函数有特殊功能，专门用作input框的提交。bindsubmit='personIden’函数是用来将所有输入框和图片地址（已经转换为服务器图片地址）的内容，全部提交给后台服务器保存。
按照这个思路，我们需要先处理图片，填写updata函数的内容：

1. 首先需要给初始数据定义一个盛放处理之后的图片的容器：

const app = getApp() //声明引用全局变量data：{ uploadImg: “ ”，//用于盛放下面我处理成服务器地址之后的图片  url: app.globalData.url  //全局url}

2. 用后台给的上传文件接口处理选中的本地图片

updata() { var that = this ; wx.chooseImage({   //微信封装的选择本地图片或相机拍照的API count : 1,  //图片上传的数量 sizeType:[ 'original', 'compressed' ],  //上传图片的合法值，原图|压缩图 sourceType:['album', 'camera'],  //上传图片的方式  本地|相机 success(res) {  //这里的成功请求执行的内容是我们的图片选择成功  对应的是wx.chooseImage的api成功     wx.uploadFile({   //微信封装的上传文件到服务器的API             url: app.globalData.url+'/upload/index/upload',  //域名+上传文件的请求接口            filePath: res.tempFilePaths[0],  // tempFilePath可以作为img标签的src属性显示图片 服务器图片的路径             name: 'image',  //上传到服务器的参数，自定义，我定义的是image            header:{                   "Content-Type":"multipart/form-data;charset=utf-8",                   "accept":"application/json",                    "Authorization":"Bearer .."              },       // header非必填项，具体作用见官方文档、                success(res) {        //这里的成功请求执行的内容是我们的图片上传到服务器成功 对应的是wx.uploadFile的api成功                  console.log(res.data)                    var data = JSON.parse(res.data)          //从打印结果可以看出来我们打印的对象里面是字符串类型，所以要用JSON.parse将里面的内容序列化转换为json格式 只针对我的这个数据，具体需不需要这一步要看打印的数据结果                    that.setData({                        uploadImg: data.url.filePath   //将图片转换之后的服务器地址data.url.filePath(打印结果显示我的是data.url.filePath)推到data里面定义的空容器updataImg。html界面的显示也是用的这个路径，值得注意的是html里面要加上url域名                    })                    console.log(that.data.uploadImg)                }              })           }      })   }

3.将这个文件提交给后台服务器保存

personIden(e) {    var that = this;   var uploadImg = that.data.uploadImg;    //已经经过处理的图片赋值给uploadImg    console.log ('form发生了submit事件，携带的数据为：'，e.detail.value)  //打印提交的内容    var val = e.detail.value;   //获取此页的所有输入框的value值     val.Img_url = uploadImg  //把图片文件路径追加给val，因为打印发现img_url不在val对象中，单独被拿出来了，img_url是后台接口参数     wx.request({          url: app.globalData.url + '/rc/User/personal_add',  //请求提交的接口           header: {            'content-type': 'application/json' // 默认值          },            method: 'POST',  //post请求方式             data: { val },  //将输入的输入框value和图片路径反馈给后台             success(res) {                  console.log(res)                wx.showToast({                  title: '提交成功',                icon: 'success',                  duration: 2000           })          }        }) }

以上就是如何将本地图片文件上传到服务器的具体操作详解了，其中也涉及了微信小程序如何获取到input的输入内容，上传到服务器。谢谢阅读。