第八组 Beta（1/3）

第八组 Beta（1/3）

一、完成任务

实现内网穿透，前端将图片上传给后端

二、本周工作

1. 前端

   成员：李双颖，李心月

   预计完成：完成前后端对接，实现将本地图片通过服务器传递给后端

   实际完成：能够从本地获取图片，采用了axios+FormData图片上传方式进行上传，无报错，数据正常

   <script>
   //引入自适应缩放文件
   import drawMixin from "@/mixin.js";
   import axios from "axios";
   export default {
   	//注册mixin
   	mixins: [drawMixin],
   	data:{
   		src:""
       },
   	methods: {
   		getpicture(e){
   			console. log(e. target . files[0]);
   			var reader = new FileReader();
   			var formData = new FormData() ;
   			formData . append( name: 'img', e. target. files[0]);
   			console.log(formData);
   			console.log(formData.get('img'));
   

   axios
   	.post( url: "http://ljk. free. idcfengye . com/ get/", formData)
   	. then(res=>{
   		console.log(res);
   		if (res. status===200){
   			alert("成功");、
   			this . $notify({
   				title: '成功'，
   				message: ' 提交成功',
   				type: ' success',
   				duration: 1000
   			});
   		}else{
   			alert("失败");
   		}
   	})
   	. catch(error =>
   		//请求失败，触发catch中的函数 可省略
   		console. log(error)
   	)
   

   <input @change= "getpicture ($event)" type-"file" 1d="file" styLe="display: none" accept=" image/*">
   <button class= " button1" @click="changeImg">上 传 图 片</button>
   <button class="button2">下 载 图 片</button>
   

   遇到的问题：数据上传到服务器失败

2. 后端

   成员：李金珂，金知霖，华瑞馨

   预计完成：实现内网穿透，配合前端同学完成前后端对接，修改后端bug

   实际完成：实现内网穿透，修改后端bug

   
   

   遇到的问题：前后端对接时出现连接超时问题

三、燃尽图

四、例会照片

五、收获与疑问

理解并成功应用了内网穿透，解决了没有服务器的大难题。但目前前后端对接还是有一些问题。由于最开始前后端同学没有沟通好，导致对接时需要的参数出现差错，沟通后成功解决。但现在后端在接收前端传输来的图片时还是会报错，下周再研究一下。

​