阿里云OSS对象存储上传图片及智能图像识别垃圾识别

相信各位广大的新手程序员和我一样,想写一个智能图像识别,可是查百度总是查不到或者查的时候不知道是什么意思,下面我将我自己写查文档的过程和代码贡献出来

准备工作
首先我们要先申请阿里云智能图像识别
在这里搜索智能图像识别

然后选择这里传送门

在这里开通

当然我已经开通了 ,就不能重复开通了地址只能选择[华东2(上海)] 这里是开通所有的智能图像识别除了付费使用的

然后这个地方同意了

最后选择右下角的立即开通

这里是阿里云智能图像识别的文档地址,这里都有各个参数的详细介绍

下面将我的代码呈上

首先使用Node.js接口技术,相信各位大佬们都知道nodejs需要准备什么我将我最重要的部分呈出来

我这里也是百度出来的,然后根据文档参考百度出来的
这里要先npm i @alicloud/pop-core -save

// 阿里云视觉智能开放平台 图像识别 垃圾分类
// 引入图像识别中的垃圾分类识别
const Core = require('@alicloud/pop-core')server.post('/gcs', (req, res, next) => {var client = new Core({accessKeyId: '这里是你在阿里云的AccessKey ID,相信各位大佬都知道怎么申请',accessKeySecret: '这里是每一个AccessKey ID对应的AccessKey Secret',// securityToken: '<your-sts-token>', // use STS Tokenendpoint: 'https://imagerecog.cn-shanghai.aliyuncs.com',apiVersion: '2019-09-30',})let imgUrl = req.body.imgUrl//我这里是为了配合vue使用的 获取图片上传成功之后生成的图片对应的OSS对象存储服务器上的url地址var params = {ImageURL: imgUrl,}var requestOption = {method: 'POST',}client.request('ClassifyingRubbish', params, requestOption).then(ress => {// console.log(JSON.stringify(ress))res.send({message: '识别成功',code: 200,results: ress,})},err => {// console.log(err)res.send({ message: '识别失败', code: 201, results: err })return})
})

然后接下来就是阿里云OSS对象存储上传图片了

首先我们需要先进入阿里云控制台

进入之后点击这里

然后搜索对象存储 OSS
没有开通的他会提示你开通

然后在这里创建buffer

接下来就是将我的代码片段呈上来了,我用的vue+vant

首先要先npm i ali-oss

在src目录下新建一个utils文件夹,然后新建一个js文件alioss.js

alioss.js

var OSS = require("ali-oss")export function client() {var client = new OSS({Region: "华东2（上海）",//如果您是跟着我的步骤走的这里就是这个region: "oss-cn-shanghai",//如果您是跟着我的步骤走的这里就是这个Endpoint: "oss-cn-shanghai",//如果您是跟着我的步骤走的这里就是这个//   region: 'oss.shanci.tech',accessKeyId: "这里同上方的accessKeyId一样",accessKeySecret: "这里同上方的accessKeySecret一样",bucket: "gcss",//这里是刚才创建的buffer名称}) //后端提供数据return client
}

index.vue
HTML部分

 <van-grid :border="false" :column-num="5"><van-uploader :after-read="afterRead"><van-grid-item><van-icon name="photograph" size="2.3rem" color="#666" /><span>拍照识别</span></van-grid-item></van-uploader></van-grid><!-- 垃圾识别之后的弹出层 --><!-- 弹出层 --><van-popup v-model="show" closeable><div class="ljfl-tcc"><img :src="url" alt="" /><span>垃圾:{{ garbage_lj.Rubbish }}</span><span>垃圾类别:{{ garbage_lj.Category }}</span></div></van-popup>

<script>
import { client } from "../utils/alioss"//这里是引入刚刚写的alioss.js文件
export default {data() {return {url: "", //拍照后传递的url参数garbage_lj: "", //拍照后传回来得垃圾数据}},methods: {afterRead(file) {this.$toast.loading({message: "识别中...",forbidClick: true,})// 此时可以自行将文件上传至服务器file.status = "uploading"file.message = "上传中..."let len = len || 32var Imgname = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"var maxPos = Imgname .lengthvar pwd = ""for (let i = 0; i < len; i++) {pwd += Imgname .charAt(Math.floor(Math.random() * maxPos)) // 生成32位随机字符}let name = file.file.namevar pos = name.indexOf(".")let type = name.substr(pos)var fileName = `${Date.parse(new Date())}` + pwd + type // 文件名称（时间戳+随机字符+后缀）client().multipartUpload(fileName, file.file).then((res) => {this.url = res.res.requestUrls[0].split("?")[0]// console.log("res", res.res.requestUrls[0])console.log("url", this.url)let imageUrlObj = {}imageUrlObj.fileName = res.res.requestUrls[0]imageUrlObj.fileUrl = res.res.requestUrls[0]imageUrlObj.fileType = 1imageUrlObj.type = 1this.imageUrlIdCard = imageUrlObj// this.submitFile() //调后端接口，将oss返回的数据传给后端存储倒库file.status = ""file.message = ""let params = `imgUrl=${this.url}`//这里是获取的图片上传成功后对应的OSS对象存储生成的url地址console.log(params)//这里是往刚刚那个Node.js发送请求,进行垃圾分类识别this.axios.post("/gcs", params).then((res) => {// console.log(res)if (res.data.code != 200) {this.$toast.fail("抱歉!识别失败!我们正在努力学习中!")} else {this.garbage_lj = res.data.results.Data.Elements[0]// console.log(this.garbage_lj)this.show = true}})}).catch((err) => {console.warn(err)})console.log(file)},},
}
</script>

弹出层的样式

// 弹出层样式
<style lang="scss" scoped>
.van-popup--center {border-radius: 1.5rem;
}
.ljfl-tcc {width: 70vw;text-align: center;img {display: block;margin: auto;margin-top: 0.9rem;width: 90%;border-radius: 1.5rem;}span {display: block;margin: 0.7rem 0;}
}
.van-button--large {width: 90%;display: block;margin: auto;margin-bottom: 0.5rem;
}
</style>

这是我的上传成功后的效果图

好了,我的就介绍到这里了,编写不易,如果有什么侵权的地方请联系我,或者各位大佬感觉有什么地方出现错误,可以指点出来,可以联系我进行修改

明天就是除夕夜了,我在此提前祝大家新年快乐,祝各位大佬在新的一年里事业步步高升

感谢各位大佬能够耐心看完小的编写的文章*

阿里云OSS上传及智能图像识别垃圾识别相关推荐

Nginx 代理转发阿里云OSS上传的实现代码
这篇文章主要介绍了Nginx 代理转发阿里云OSS上传的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧前言因为小程序上传需要https,服务器https用的是 ...
SpringBoot整合阿里云OSS上传文件
一.需求分析文件上传是一个非常常见的功能,就是通过IO流将文件写到另外一个地方,这个地方可以是项目下的某个文件夹里,或者是本地电脑某个盘下面,还可以是云服务OSS里面,这里就是我要讲到的OSS,我写 ...
thinkPHP 阿里云OSS 上传文件、直接下载
阿里云OSS 上传文件.直接下载 1. 安装OSS SDK composer require aliyuncs/oss-sdk-php 2. thinkPHP接口 public function up ...
阿里云OSS上传文件设置请求头
之前写过一篇发送文件消息的,原生input上传文件(聊天发送文件消息),这次的需求就是更改上传地址,使用阿里云OSS上传. 如果想了解阿里云对象存储OSS是如何使用的,请看阿里云存储对象OSS使用讲解 ...
springboot整合阿里云oss上传的方法示例
这篇文章主要介绍了springboot整合阿里云oss上传的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 OSS申请和 ...
spring boot 整合阿里云oss上传
Spring Boot 整合阿里云OSS上传 OSS申请和配置 1. 注册登录 2.开通以及配置 springboot整合使用 1. 进入我们springboot的项目中,导入oss相关依赖 2. ...
阿里云oss上传svg等格式的文件，返回的路径打开后是下载而不是预览
在做的一个项目,阿里云oss上传svg等格式的文件,返回的路径打开后是下载而不是预览.之后web同事跟产品说不好处理,换回了使用jpg格式的文件.但是最终这个问题都是要解决的,产品要求下期也要上传sv ...
阿里云OSS上传请求403问题的完美解决方案及uni.uploadFile h5上传文件失败完美解决方案
在使用阿里云OSS服务时,会用到跨域AJAX上传,上传时报403错误,之前遇到过此类问题并成功解决了,但时间长了遗忘,因此记录下来以备后续学习了解ajax跨域上传OSS. ajax跨域上传首先会发送o ...
阿里云OSS上传文件时,如何显示上传网速
阿里云OSS上传文件时,如何显示上传网速业务场景用户上传时,网速很慢,或者在上传大文件时,虽然有进度条,但是动的很慢,或者不明显,用户会产生困惑. 所以就产生了一个显示网速的需求点. 实现方式 E ...

阿里云OSS上传及智能图像识别垃圾识别

阿里云OSS对象存储上传图片及智能图像识别垃圾识别

阿里云OSS上传及智能图像识别垃圾识别相关推荐

最新文章

热门文章