之前做项目的是时候，不知道为什么总是特别害怕做这个图片上传，刚开始接触他我是非常拒绝的，但是，后面公司只剩我一个前端，没有了依赖，只能硬着头皮上。当然过程是非常痛苦的，也遇到了很多坑，当我做成功之后，突然觉得上传图片也就那样。现在就我就把我的小小的总结分享给大家，希望能帮助到大家！
htlm:
<div class="img">
<button @click="douploadImg();" type="button" class="btn common-button">上传头像</button>
</div>
//这个div要隐藏起来
<div class="hidden" style="display: none">
<form id="imgForm" method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="file" id="fileImg" name="file" onchange="setpicurl(this);">
</div>
</form>
</div>
js:
//修改图片路径,让图片回现
function setpicurl(obj){
var file = obj.files[0];
//获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
var windowURL = window.URL || window.webkitURL;
//createObjectURL创建一个指向该参数对象(图片)的URL
var dataURL;
dataURL = windowURL.createObjectURL(file);
console.log(dataURL)
$('.img img')[0].src=dataURL;
},
//点击触发上传图片
clickPic:function(){
$("#fileImg").click();
console.log($("#fileImg").val())
},
请求后台
douploadImg:function(){
var vm=this;
//先获得图片的路径
var uPic = $("#fileImg").val();
if(uPic == null || uPic == "") {
$.alert("请选择文件在上传");
return;
}
var formData = new FormData($("#imgForm")[0]);
formData.append ("openId" , "12456");//如果有其他参数还可以通过该方法进行传递
formData.append ("imageType" , 1);
var url=g.baseUrl+"uploadImage";
vm.$http.post(url,formData).then(function(res){
alert("success");
console.log(res)
},function(){
alert('请求失败处理'); //失败处理
});
}
总结：（1）点击头像时，触发隐藏起来的input，该input的type必须是file。
（2）当用户选中图片之后，会触发setpicurl方法（注意，我现在用的是vue框架，但是setpicurl方法不能放在method里面，否则会报错，我也不知道是什么原因，只能把这个方法放出来），把选中的图片回显到页面。
（3）最后点击上传头像，使用FormData模拟表单上传，如果需要参数其他参数给后台，可以使用append(key,value)方法进行传递，最后就ok啦！
