微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?

微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧，但是把图片上传到服务器就不一定了，下面一起随小编看看微信小程序怎么上传图片到服务器吧。

微信小程序怎么上传图片到服务器?

首先，我们来看一下图片上传的小程序api。

这里的filePath就是图片的存储路径，类型居然是个String，也就是只能每次传一张图片，我以前的接口都是接收一个array，所以只能自己去改接收图片的接口。

看一下小程序页面效果图

一个很常见的修改头像效果，选择图片(拍照)，然后上传。

下面就是贴小程序代码了

首先是小程序wxml代码

css代码我就不贴了，一些样式而已。

对应的JS代码：

主要讲解一下小程序JS代码

1、chooseImageTap方法

用来显示一个选择图片和拍照的弹窗，用到了微信的一个页面交互的api showActionSheet，点击查看详细使用

显示操作菜单

2、chooseWxImage方法

主要是用来选择图片以及接收图片路径回调的监听，点击查看详细使用

从本地相册选择图片或使用相机拍照

3、上传

在chooseWxImage方法的success回调中我们可以看到，我把返回的图片路径res.tempFilePaths[0]

赋值给了logo，下面我们只需要调用upload方法就ok了，微信的uploadFile方法被我封装了一下变成了upload_file。

uploadFile方法

//上传文件

function upload_file(url, filePath, name, formData, success, fail) {

console.log('a='+filePath)

wx.uploadFile({

url: rootUrl + url,

filePath:filePath,

name:name,

header: {

'content-type':'multipart/form-data'

}, // 设置请求的 header

formData: formData, // HTTP 请求中其他额外的 form data

success: function(res){

console.log(res);

if(res.statusCode ==200 && !res.data.result_code){

typeof success == "function" && success(res.data);

}else{

typeof fail == "function" && fail(res);

}

},

fail: function(res) {

console.log(res);

typeof fail == "function" && fail(res);

}

})

}

filePath就是upload_file中我们传进来的logo变量，也就是图片的绝对路径。

微信小程序上传图片到服务器可能稍微比小程序图片保存到本地复杂，但是只要大家按照小编的方法来，也不会很复杂，所以大家赶快去试试吧，你如果还有更多小程序的问题，可以来微小乔看看。

相关推荐：