微信小程序:选择图片、上传图片(应用:切换用户头像)及过程中遇到的问题
1.遇到的问题:
上传图片时,后端接收不到请求,前端返回调用失败的信息: errMsg: “uploadFile:fail timeout”
解决方法
在wx.uploadFile接口中添加超时时间timeout: 600000000,
在网上搜到了一些解决方法:包括在app.ison里面配置超时时间,但是没有成功,可能是我的方法不对,但是这个解决方法成功了,希望对大家有帮助!
2.代码
需要更改的地方:
-
1.wx.uploadFile接口中的url,需要用自己的后端服务器地址
-
2.赋值名称可改可不改,根据个人需求
-
3.超时时间可改可不改,根据个人需求
wxml
<button bindtap="uploadimg">上传图片</button>
<image class="" src="{{imgpath}}" mode="widthFix"></image>
js
var app = getApp();
Page({
data: {
imgpath: '',
imgname: ''
},
onLoad() {},
uploadimg: function () {
var that = this;
// 从本地相册选择图片或使用相机拍照。
wx.chooseImage({
// 最多可以选择的图片张数
count: 1,
sizeType: ["compressed"],
// 选择图片的来源
sourceType: ["album", "camera"],
success: function (res) {
var temppath = res.tempFilePaths;
console.log("选择的图片为:", temppath);
that.setData({
imgpath: temppath[0]
});
uploadimg(that, temppath[0]);
},
})
function uploadimg(page, path) {
wx.showToast({
icon: 'loading',
title: '正在上传',
}),
wx.uploadFile({
// 开发者服务器地址
url: 'http://.........',
filePath: path,
name: 'file',
formData: {},
// 超时时间,单位为毫秒
timeout: 600000000,
header: {
"content-type": "multipart/form-data"
},
success: function (res) {
console.log(res.data);
//这里直接用that大概是因为这个自定义的函数在上面uploadimg有了回调,而uploadimg函数
//已经定义了that,所以下面就直接使用that
that.setData({
imgname: '/images/tximg/' + res.data
})
},
fail(e) {
console.log(e);
console.log("fail");
}
})
}
},
})
官方文档:
将本地资源上传到服务器wx.uploadFile