二维码生成识别+图文识别-后续优化吐槽

这是我参与更文挑战的第2天，活动详情查看：更文挑战

叨叨念：太折腾了，简单加了个 UI 框架，结果说我页面太丑了，然后功能不完善，打回重做了。

大学老师真的一言难尽，从 SpringBoot 教到 Python 机器学习再到实训让我们做纯 WEB 应用。我究竟拿时间换来了什么，谁又是在忙碌中的一个小丑呢？

我承认页面有点丑吧，但不至于说我敷衍了事吧，然后说让我实现能在手机访问，说什么 pwa，还一脸嫌弃我不懂。大学真的什么牛马老师都有，她太把自己当回事了吧，实训就4天，要给你部署给你手机访问给你页面好看给你做服务器我的天呐。

针对 “图片要正常上传，之后再识别” 的问题。

因为没有后端，我想的是直接贴图片地址传给阿里云进行文字识别，现在要我图片能上传，我上传到哪去我就晕了。。。想到自己一个线上项目还公开着文件上传接口，那就凑合用一下吧。

<input id="urlImage" type="text" class="form-control" placeholder="图片地址" style="margin: 5px;" value="xxx">
<div style="display: flex;align-items:center; margin-left: 5px;">上传图片：<input type="file" id="identifyImage"></div>

使用 ajax-post 请求文件上传接口，需要构造 FormData，使用 append() 函数传入接口需要的参数。上传成功后对页面渲染，替换内容，不去影响其他函数的正常逻辑操作。

$("#identifyImage").on('change', function () {
  var formData = new FormData();
  formData.append("file", $('#identifyImage')[0].files[0]);
  $.ajax({
    url: 'https://xxxxxxxx/upload',
    type: 'post',
    data: formData,
    contentType: false,
    processData: false,
    success: (response) => {
      $('#urlImage').attr('value', response.data.url);
      $("#imgIdentify").attr('src', response.data.url);
      // console.log(response.data.url);
    }
  })
});

遇到的奇葩问题，id 写成中文的了，结果监听不到内容，懵逼了好一会。

总所周知，只要页面重新排一下，又是一个新的作品。

.background {
  background-image: linear-gradient(135deg, #909496 0, #25d8df 100%);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}

body {
  padding: 20px;
}

栅格布局

<div class="col-md-2">
	导航栏(右侧)
</div>
<div class="col-md-10">
	内容(左侧)
</div>