不积跬步,无以至千里;不积小流,无以成江海
由于工作原因,最近在写web页面,移动端和web有共通之处,总结遇到的坑,新手坑!
问题1:项目中使用JSONP的方式实现跨域,我在实现图片上传的接口中添加JSONP出问题,接口请求出错。
解决:其实JSONP只能是"GET"请求方式,使用post方式上传图片,就会报错,删除
$.ajax({
url: url,
dataType: "JSONP",
type: "POST",
data: data,
中的dataType: "JSONP"就好了
问题2:编写form表单时,没有添加 enctype="multipart/form-data" 造成不能上传
解决:后台提供的是form-data的上传方式,没有填写"multipart/form-data"就是造成不识别,报错。
下面是完整代码:
<form name="form1" id="form1" enctype="multipart/form-data">
<p>photo:<input type="file" name="coverUrl" id="photo"></p>
<p><input type="button" name="b1" value="submit" onclick="uploadAvatar()" style="border: #393F4D solid 0.05rem"></p>
</form>
function uploadAvatar() {
var url = "http://testlan.yuanxingtech.com:8080/yxvcity-admin-vc" + "/rest/partnerPlanningSchemeInfo/publishOrSaveSchemeInfo";
var citizenId = "92eb1d963102481b8013a45892e00511";
var data = new FormData();
data.append('coverUrl', $('#photo')[0].files[0]);
data.append("phone", '');
data.append("name", '尸王争霸');
$.ajax({
url: url,
type: "POST",
data: data,
// async : false,
cache : false,
contentType : false,// 告诉jQuery不要去设置Content-Type请求头
processData : false,// 告诉jQuery不要去处理发送的数据
success: function (res) {
console.log(res);
},
error: function (err) {
console.log(err);
}
});
console.log("上传头像。。。");
}
跑得慢,听到的是骂声; 跑得快,听到的就只是风声