超简单上传图片

之前做项目的是时候，不知道为什么总是特别害怕做这个图片上传，刚开始接触他我是非常拒绝的，但是，后面公司只剩我一个前端，没有了依赖，只能硬着头皮上。当然过程是非常痛苦的，也遇到了很多坑，当我做成功之后，突然觉得上传图片也就那样。现在就我就把我的小小的总结分享给大家，希望能帮助到大家！

htlm:


    ![](../../images/doctor.jpg)            
    上传头像


//这个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啦！