v5.2 app 端拍照后后端获取不到图片数据问题解决方案
遇到问题:v5.2app 端拍照上传图片,后端接收不到图片数据;
原因:
1. 上传文件的请求头未配置;
2. http 加密请求有问题;
app 端拍照,图片预览功能代码:
图片预览调用组件 imageView
图片上传到后端调用平台封装的方法:
前端传值:
文件对象不能转 JSON,否则转出的文件是拿不到值,所以必须用 formData 的格式传;
在 v5.2 app 里面没有添加 formData 格式对应的请求头,所以必须添加
headers: {
“Content-Type”: “multipart/form-data”,
},
http/index.js 里面要修改对应的请求拦截方法:
;
并且要删除请求参数转换的代码,不删除后端也接收不到图片数据:
;
替换平台防篡改方法:
export default function encryption() {
instance.interceptors.request.eject(requestInterceptors);
instance.interceptors.request.use(
...createRequestInterceptors(function(config) {
// 请求防篡改
if (
config.url !== "/j_spring_security_check" &&
config.url.indexOf("authapi/wf_Model") === -1
) {
// console.time("timer");
// 添加FormData
if (!config.data) {
config["data"] = new FormData();
}
let timestamp = new Date().getTime();
timestamp = timestamp
.toString()
.split("")
.reverse()
.join("");
if (Object.prototype.toString.call(config.data) === "[object String]") {
config.data = getFormDataByObject(qs.parse(config.data));
}
if (Object.prototype.toString.call(config.data) === "[object Object]") {
config.data = getFormDataByObject(config.data);
}
if (
Object.prototype.toString.call(config.data) === "[object FormData]"
) {
config.data.append("_t", timestamp);
let keys = [];
let tempdata = {};
config.data.forEach((value, key) => {
if (!keys.includes(key)) {
keys.push(key);
// 文件内容不转码
if (Object.prototype.toString.call(value) !== "[object File]") {
// 拦截器统一转码
value = encodeURIComponent(value);
config.data.set(key, value);
} else {
value = config.data.getAll(key);
}
tempdata[key] = value;
}
});
if (config.url.indexOf("?") != -1) {
let urlData = config.url
.substring(config.url.indexOf("?") + 1)
.split("&");
urlData.forEach(data => {
let kv = data.split("=");
keys.push(kv[0]);
tempdata[kv[0]] = kv[1] ? decodeURIComponent(kv[1]) : "";
});
}
keys = keys.filter(key => !(key === "bean" || key === "method"));
if (config.params) {
for (let key in config.params) {
keys.push(key);
tempdata[key] = config.params[key];
}
}
keys.sort();
let dataStr = "";
keys.forEach(key => {
dataStr += key + "=";
if (
Object.prototype.toString.call(tempdata[key]) ===
"[object Array]" &&
Object.prototype.toString.call(tempdata[key][0]) ===
"[object File]"
) {
for (let file in tempdata[key]) {
dataStr += tempdata[key][file].name;
if (!tempdata[key][file].type) {
// 当无法识别类型时使用
dataStr += "application/octet-stream";
} else {
dataStr += tempdata[key][file].type;
}
dataStr += tempdata[key][file].size;
}
} else {
dataStr += tempdata[key];
}
});
// console.log(dataStr);
config.data.append("_sc", encrypt(dataStr + "ep"));
}
// console.timeEnd("timer");
}
})
);