最近h5使用input上传照片出现了多种问题
一、强制刷新
有客户反馈点击上传图片时候, 页面强制刷新导致数据丢失问题, 虽然这边测试没有复现出来, 但网上已经有说明情况了, 部分安卓机和苹果机运行内存不足的时候, 会强制刷新页面, 当前解决方案是清除后台缓存
二、部分安卓上传多张照片没有反应
有客户反馈上传多张照片没有反应,刚开始我的解决方案是只允许安卓单张上传, 不过多久客户又投诉单张上传很麻烦
所以input上传照片还是存在隐患, 需要另找方法解决
使用微信sdk
微信页面开发
根据流程js-sdk配置好后
// 微信环境上传
chooseWxImg() {
wx.chooseImage({
count: 9, // 默认9
sizeType: ["compressed"], // 可以指定是原图还是压缩图,默认二者都有
// sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
let locaIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img的src属性显示图片,但IOS WKWebview 不支持 localId 直接显示图片
this.syncUpload(locaIds);
},
fail() {
console.log('wx upload fail')
}
});
},
syncUpload(localIds) {
// 移除数组最后一项 遍历效果
var localId = localIds.pop();
let self = this;
wx.getLocalImgData({
localId: localId, // 图片的localID
success: function (resBackData) {
var localData = resBackData.localData;
// 判断是否有这样的头部
// alert('获取base64图片成功')
if (localData.indexOf("data:image") != 0) {
// 安卓处理
localData = "data:image/jpeg;base64," + localData;
}
// localData是经过处理的base64编码的图片
localData = localData
.replace(/\r|\n/g, "")
.replace("data:image/jgp", "data:image/jpeg");
//保存base64数组用作展示
// 拿到base64,转文件流用作提交接口
self.getBase(localData);
if (localIds.length > 0) {
self.syncUpload(localIds);
}
},
});
},
imgWxUpload(data) {
//上传成功
},
async getBase(base) {
let _this = this;
let newFormData = new FormData();
const photoName = `${new Date().getTime()}`;
let initData = base.replace(/%0A|\s/g, "");
let file = _this.base64ToFile(initData, `${photoName}.jpg`);
let rst = null;
let blob = null;
if (file.size / 1024 > 500) {
try {
rst = await lrz(file);
// alert('压缩了', )
if (this.$utils.checkDevice("isIOS")) {
blob = await this.$utils.dataURLtoBlob(rst.base64);
newFormData.append("file", this.$utils.blobToFile(blob, file.name));
} else {
newFormData.append(
"file",
this.$utils.convertBase64UrlToFile(rst.base64, file.name)
);
}
} catch (e) {
// 上传失败
}
} else {
newFormData.append("file", file);
}
// newFormData.append("file", p);
this.$ApiPost('接口', {
type: "formData",
file: newFormData
}).then((res) => {
// 获取图片地址
})
.catch((e) => {
});
},
/* base64转文件流方法 */
base64ToFile(base64Data, filename = "") {
var arr = base64Data.split(","),
mime = arr[0].match(/:(.*?);/)[1],
type = arr[0].match(/:(.*?);/)[1],
fileExt = mime.split("/")[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: type });
}
},
以上代码提供思路