项目冲刺总结

    不知不觉进入项目组已经一个月啦，本项目也到了最后一个冲刺阶段，在这个阶段里面负责了注册时完善用户信息、编辑用户信息以及项目模块的可视化图表的功能。

在本冲刺中让我比较头疼也比较有收获的功能点就是上传图片了。使用elementUI组件的确能够完成用户头像上传的功能，但是并不能将上传的图片保存到数据库或者服务器中，在看了无数篇博客尝试了无数次方法后，有了第一个版本。

    使用这种方法其实本质还是获取到文件对象，将文件对象以formData的格式附带参数传给后端。后端收到后在返回值种携带图片地址，再将图片地址赋值给需要展示的对象。使用这个方法能够达到目的，但是不知道是因为代码不够规范，在使用的过程中会有几率出现闪屏的情况。在后面完成毕设的时候，我又在这个功能点上卡住了。这一次找到了另外一篇博客，使用的方法能够完美解决闪屏的情况。

template结构：

  <el-upload
          class="avatar-uploader"
          action="/"
          :show-file-list="false"
          :http-request="
            (file) => {
              return upload(file);
            }
          "
          :before-upload="beforeAvatarUpload"
        >
          <img :src="getUrl(editForm.avator)" alt="" title="点击修改头像" />
 </el-upload>

    // 上传头像
    upload(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      formData.append("consumer_id", this.editForm.id);
      console.log(file);
      console.log(formData);
      this.$http({
        method: "post",
        headers: {
          "content-Type": "application/form-data",
        },
        url: "consumer/updateConsumerPic",
        data: formData,
      }).then(({ data }) => {
        if (data.flag) {
          console.log(data);
          this.reload();
        } else {
          this.$message("error", "上传头像失败！");
        }
      });
    },

    同样是将需要上传的文件获取过来后以formData的形式发起请求，但是这次是直接将图片上传至服务器，不需要拿到后端的返回值，再重新赋值等操作，不管是在请求的逻辑上，还是在用户体验上都更加流畅。

    其实在这个冲刺收获的不仅仅是技术点，更多的是体会到了团队协作开发的重要性，在上一个冲刺团队内的交流较少，在技术上也比较生疏，但是在本冲刺已经有了小进步，在团队中也能发挥自己的作用和团队一起完成项目！最后在成果展示的时候真的有一种看着这个项目一点点变好的骄傲感。