周总结关于项目

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

在交互方面实现了，用户的登录注册，账户信息的修改，菜谱步骤的上传（实现了一半），这周的交互我发现前后端传收数据，需要确定好发送的格式，需要与后端讨论好如何去存储一些信息，此次的图片上传中，学会了使用 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);
  };
}