未配置wx.config引起,配置上了就正常显示了
//获取微信配置信息config
getWxConfig = () => {
this.props.dispatch({
type: 'wxConfig/getWxConfig',
payload: encodeURIComponent(location.href.split('#')[0]),
callback: response => {
//通过config接口注入权限验证配置
wx.config({
//debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: response.appId, // 必填,公众号的唯一标识
timestamp: response.timestamp, // 必填,生成签名的时间戳
nonceStr: response.nonceStr, // 必填,生成签名的随机串
signature: response.signature, // 必填,签名
jsApiList: ['chooseImage', 'previewImage'], // 必填,需要使用的JS接口列表
});
},
});
};
componentDidMount() {
this.getWxConfig ()
}
//上传图片
imagesUpload = () => {
let arrayImg = [...this.state.questionPictures];
let self = this;
if (arrayImg.length >= 5) {
Toast.info('最多只能添加5张图片', 1);
return false;
}
wx.chooseImage({
count: 5 - arrayImg.length, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有, 'compressed'
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
console.log(localIds.length)
if (localIds.length > 0) {
if (localIds.length <= 5 && localIds.length + arrayImg.length > 5) {
Toast.info('总共最多支持5张照片', 1);
return false;
}
for (var i = 0; i < localIds.length; i++) {
wx.getLocalImgData({
localId: localIds[i], // 图片的localID
success: res => {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
if (localData.indexOf('data:image') != 0) {
localData = 'data:image/jpeg;base64,' + localData;
}
localData = localData
.replace('/\r|\n/g', '')
.replace('data:image/jgp', 'data:image/jpeg');
//调用上传获取上传图片的url
let formData = new FormData();
if (
this.dataUrlToFile(localData, 'documents' + new Date().getTime() + '.jpg').size /
1024 >
5000
) {
Toast.info('图片需小于5M', 1);
return false;
}
formData.append(
'file',
this.dataUrlToFile(localData, 'documents' + new Date().getTime() + '.jpg')
);
console.log(formData)
$.ajax({
url: API.BASEAPI + 'documentInvestigation/uploadImage.do',
type: 'POST',
contentType: false,
processData: false,
data: formData,
async: false,
mineType: 'multipart/form-data',
dataType: 'json',
xhrFields: {
withCredentials: true,
},
success: response => {
console.log(response);
if (response.status == 'S' && response.data) {
let list = [...self.state.questionPictures]
list.push(response.data[0].imageUrl);
console.log(list)
self.setState({
questionPictures: list,
});
}
},
error: function(e) {
console.log(e);
},
});
},
});
}
}
},
// fail:function(err) {
// alert(JSON.stringify(err))
// }
});
};
dataUrlToFile = (dataurl, filename) => {
let arr = dataurl.split(','),
mine = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mine });
};
网友评论