阿里云云开发Web应用训练营day07

最新推荐文章于 2024-04-28 10:42:42 发布

小柳学渣

最新推荐文章于 2024-04-28 10:42:42 发布

阅读量476

点赞数 1

本文链接：https://blog.csdn.net/l503301397/article/details/108821295

版权

本文介绍了一个基于阿里云的垃圾分类识别应用开发过程。从设计稿导入、代码编写到部署上线全流程解析，展示了如何利用阿里云平台实现图片上传及垃圾种类识别等功能。

摘要由CSDN通过智能技术生成

1.登录阿里云云开发平台 https://workbench.aliyun.com/
2.创建新应用
在这里插入图片描述

3.下载垃圾分类设计稿.sketch文件 https://wb-case-showroom.oss-cn-shanghai.aliyuncs.com/demo/垃圾分类设计稿.sketch
4.开发部署
5.右键 Open With imgcook studio

6.导入 -> 选择一个文件 -> 把下载的垃圾分类设计稿.sketch导入
7.导出
在这里插入图片描述
8.点击 + 号，将属性id设置为image

名称和类型的id分别设置为name和category

选择图片，在右侧事件添加onClick原生事件

输入以下代码并保存

function onClick(e) {
function select(handler) {
  var input = document.createElement('input');
  input.type = 'file';
  input.onchange = function() {
    var files = Array.from(input.files);
    handler(null, files[0]);
  };
  input.click();
}
select((err, file) => {
  const filename = (new Date().getTime()) + '_' + file.name
  const freader = new FileReader();
  freader.readAsDataURL(file);
  freader.onload = () => {
    const img = document.getElementById('image');
    img.src = freader.result;
  };
  fetch('/policy', {
      method: 'post'
    })
    .then((res) => res.json())
    .then((policy) => {
      console.log(policy);
      const formData = new FormData();
      formData.append('Filename', filename);
      formData.append(
        'key',
        policy.dir + '/' + filename
      );
      formData.append('OSSAccessKeyId', policy.accessid);
      formData.append('policy', policy.policy);
      formData.append('Signature', policy.signature);
      formData.append('success_action_status', '200');
      formData.append('file', file);
      return fetch(policy.host, {
        method: 'post',
        body: formData
      }).then(() => policy);
    })
    .then((policy) => {
      const imageUrl = [policy.host, policy.dir, filename].join('/');
      return fetch(`/algo`, {
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        body: `imageUrl=${imageUrl}`
      });
    })
    .then((res) => res.json())
    .then(({
      Data
    }) => {
      if (!Data) {
        alert('无法识别该图片');
        return;
      }
      const {
        Category,
        Rubbish
      } = Data.Elements[0];
      document.getElementById('name').innerText = Rubbish || '未识别';
      document.getElementById('category').innerText = Category || '未识别';
      console.log(data);
    });
});
}

9.保存项目并创建
在这里插入图片描述
10.代码 -> H5开发规范 ->关闭

11.左侧创建imgcook文件夹，导出代码到该文件夹

12.打卡imgcook文件夹里的index.html文件，修改标题

13.在云开发平台的应用配置里批量添加环境变量

AKID=LTAI4G1j3U8ue1yT3g6Tg1TG
AKSK=WB8Ev6zMHoKQnUSLp8V4zP7xeAgbWC
REGION=cn-shanghai
OSSBUCKET=wb-case-showroom
OSSDIR=photo

在这里插入图片描述
14.部署

15.加上/imgcook/index.html就能看到了