项目场景：
在使用vue+uni-app开发微信小程序的时候，调试报错：解析 JSON 失败: TypeError: Cannot read property ‘push’ of undefined
问题描述
报错如下：
以下是出问题的代码：
data() {
return {
fileLists: [],
}
}
// 上传文件
chooseMessageFile() {
var uid = this.uid
wx.chooseMessageFile({
count: 1, // 默认9
type: 'file',
// extension: ['.zip', '.docx', '.doc', '.pdf', 'txt', '.csv', '.xlsx', '.ppt', '.pptx'],
success: function (res) {
console.log(res)
const tempFilePaths = res.tempFiles[0].path;
const tempFileName = res.tempFiles[0].name;
wx.uploadFile({
url: BASE_API_URL + '/Upload/upload', //接口地址
filePath: tempFilePaths,
name: 'file',
formData: {
'uid': uid
},
success: (res) => {
try {
const jsonData = JSON.parse(res.data);
console.log('解析后的JSON数据:', jsonData);
// 处理 JSON 数据
if (jsonData.code == 0) {
const link = jsonData.data;
console.log('解析后的link:', link);
const linkData = { annex_id: "", title: tempFileName, link: jsonData.data };
console.log('解析后的linkData:', linkData);
console.log('这是fileLists:', that.fileLists);
this.fileLists.push(linkData);
wx.showToast({
title: '上传成功',
icon: 'success'
});
} else {
wx.showToast({
title: '上传失败',
icon: 'none'
});
}
} catch (e) {
console.error('解析 JSON 失败:', e);
console.error('原始数据:', res.data);
wx.showToast({
title: '解析 JSON 失败',
icon: 'none'
});
}
},
fail: (err) => {
console.error('上传失败:', err);
wx.showToast({
title: '上传失败',
icon: 'none'
});
}
})
}
})
},
原因分析：
提示：这里填写问题的分析：
在代码中多次打印，排查问题，最终问题锁定在了下面这行代码中：
this.fileLists.push(linkData);
请教了一下以前的学长，得知问题可能出现在多层方法嵌套上，导致this的指向错误
解决方案：
在最外层的方法开始的时候增加如下代码：
var that = this
并且将嵌套的方法中的this改成that
// 上传文件
chooseMessageFile() {
var uid = this.uid
wx.chooseMessageFile({
count: 1, // 默认9
type: 'file',
// extension: ['.zip', '.docx', '.doc', '.pdf', 'txt', '.csv', '.xlsx', '.ppt', '.pptx'],
success: function (res) {
console.log(res)
const tempFilePaths = res.tempFiles[0].path;
const tempFileName = res.tempFiles[0].name;
wx.uploadFile({
url: BASE_API_URL + '/Upload/upload', //接口地址
filePath: tempFilePaths,
name: 'file',
formData: {
'uid': uid
},
success: (res) => {
try {
const jsonData = JSON.parse(res.data);
//console.log('解析后的JSON数据:', jsonData);
// 处理 JSON 数据
if (jsonData.code == 0) {
const link = jsonData.data;
//console.log('解析后的link:', link);
const linkData = { annex_id: "", title: tempFileName, link: jsonData.data };
//console.log('解析后的linkData:', linkData);
//console.log('这是fileLists:', that.fileLists);
that.fileLists.push(linkData);
wx.showToast({
title: '上传成功',
icon: 'success'
});
} else {
wx.showToast({
title: '上传失败',
icon: 'none'
});
}
} catch (e) {
console.error('解析 JSON 失败:', e);
console.error('原始数据:', res.data);
wx.showToast({
title: '解析 JSON 失败',
icon: 'none'
});
}
},
fail: (err) => {
console.error('上传失败:', err);
wx.showToast({
title: '上传失败',
icon: 'none'
});
}
})
}
})
},
问题解决
