微信小程序如何将本地图片文件上传到服务器？wx.chooseImage& wx.uploadFile方法使用案例以及微信小程序如何获取input框的值。

微信图片文件上传需要用到的两个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
}

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

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的输入内容，上传到服务器。谢谢阅读。

• 点赞
• 收藏
• 分享
• 文章举报