周总结关于项目

这周静态页面基本已经完工，没剩几个页面了，

在交互方面实现了，用户的登录注册，账户信息的修改，菜谱步骤的上传（实现了一半），这周的交互我发现前后端传收数据，需要确定好发送的格式，需要与后端讨论好如何去存储一些信息，此次的图片上传中，学会了使用JS原生的FormData来传输文件，传输文件时要使用$.ajax而不能直接使用$.post因为需要调整一些参数的类型，

如下是一个例子

我使用$.ajax传输一个图片文件

其中把

contentType设置成了false

processData设置成了false

就时不对我所发送的数据做处理；直接发送

function userimg2(param) {
   let file=param.files[0];
   let senddata = new FormData();
   senddata.append("file",file);
   senddata.append("id",1);
   let ready = new FileReader();
   $.ajax({
      type: "post",
      url: "http://10.102.241.171:8080/user/insertUserPhoto",
      data: senddata,
      contentType:false,
      processData:false,
      success: function (response) {
       if(response.msg=="插入成功！"){
          console.log(response.msg);
            let name1 = param.parentNode.parentNode.children[0];
            ready.readAsDataURL(file);
            ready.onload = function (ev) {
               name1.setAttribute("src",ev.target.result);
              }
       }
      },
      error:function (param) {
         alert("失败了");
        }
   });
}

还有就是，插入图片的直接显示

如下传入一个类型为file的input 

通过readAsDataUrl把文件转为base64格式直接赋给img的src属性就能显示了

function imgup(obj){
    let file=obj.files[0];
	let reader = new  FileReader();
	let name1=obj.parentNode.children[0];
     reader.readAsDataURL(file);
     reader.onload = function (ev) {
        /*  $(name).attr("src", ev.target.result); */
		 name1.setAttribute("src",ev.target.result)
     }
 }