第八组 Beta冲刺（2/3）

第八组 Beta冲刺（2/3）

一、本周工作总结

前端：李双颖，李心月

计划完成：通过内网穿透完成前后端的对接、完成图片上传到后端、从后端获取到处理后的图片并在页面合理展示、完成图片下载功能。
实际完成：成功完成了预期所有任务。

相关代码实现：

<div v-if="show">
      <img
          :src="require('/src/assets/example.png')"
          style="margin-top: -50px;width: 800px;height:400px;padding: 20px;"
           alt="example"/>
    </div>
    <div v-else style="display:flex;flex-direction: row">
      <img :src=url
           style="margin-top: -50px;height:400px;width:auto;padding-top: 20px;padding-left: 15px;padding-bottom: 5px;"
           />
        <img :src="require('/src/assets/彩色-箭头-向右-1.png')"
             style="margin-top: -50px;height:150px;width:auto;padding-top: 140px;padding-bottom: 5px;padding-right: 20px;padding-left: 20px"
             alt="箭头"/>
      <img :src=thefile
           style="margin-top: -50px;height:400px;width:auto;padding-top: 20px;padding-right: 20px;padding-bottom: 5px;"
           alt="after"/>
      </div>
<input @change="getpicture($event)" type="file" id="file" style="display: none" accept="image/*">
    <button class="button1" @click="changeImg">上 传 图 片</button>
    <button class="button2" @click="downLoad">下 载 图 片</button>

getpicture(e){
      console.log(e.target.files[0]);
      this.url = URL.createObjectURL(e.target.files[0]);
      var reader = new FileReader();
      var formData = new FormData();
      formData.append('img', e.target.files[0]);
      console.log(formData);
      console.log(formData.get('img'));
      axios
          .post("http://temp.imbai.tk/get/",formData)
          .then(res=>{
            console.log(res);
            if(res.status===200){
              alert("上传成功");
              this.thefile=res.data.img.toString();
              console.log(this.thefile);
              this.show=false;
            }else{
              alert("请上传图片(jpg/png)！");
            }
          })
          .catch(error =>
              console.log(error)
          )
    },
    changeImg(){
      let filedom=document.querySelector("#file");
      filedom.click();} //唤起选图片

实现效果：

后端：金知霖，华瑞馨，李金珂

计划完成：配合前端同学实现前后端对接，完善图像修复功能、内网穿透

实际完成：成功完成了预期所有任务。

内网桥接：

遇到的问题：

最开始前端同学的设计是只显示修复后的图片，但这样会导致用户无法对比，也就看不出修复的效果。随后前端的同学又美化了一下，达到了最终效果。

二、燃尽图

三、剩余任务

优化界面，优化图像修复功能。

四、收获

本周是非常艰难的一周，小组同学相继感染新冠，但在互相鼓励下最终完成了所有的任务。前端同学如今代码改的越发的熟练，后端的同学也能很好地配合前端同学。本周结束后我们小组取得了阶段性胜利，在未来的一周我们也会继续努力完善项目。