提前在easydl接口上训练好了数据集,调用接口,前端使用的是vue框架和element-ui组件。
由于easydl接口上传图片时必须使用base64编码,所以需要将图片转成base64编码。
代码如下:
<template>
<div>
<el-upload
list-type="picture-card"
action=""
accept=".application/pdf,image/png,image/jpeg,image/jpg,"
:limit="1"
:auto-upload="false"
:on-change="handleChange"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
图片为:
{{ titleppp }}
</div>
</template>
<script>
// 组件引入
export default {
// 注册组件
components: {
CommonFooter,
},
data() {
return {
titleppp: " ",
};
},
//方法函数如下
methods: {
//上传文件事件
handleChange(file) {
//调用base64方法进行数据的转换(方法在下面定义)
this.getBase64(file.raw).then((res) => {
this.submitUpload(res);
});
},
//base64编码转换方法
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
submitUpload(base64) {
let base64FileList2 = base64;
let base64FileList = base64FileList2.slice(23, base64FileList2.length);
console.log(base64FileList);
this.$axios({
url: "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/classification/ks_sb?access_token=24.02481235b2c958a5ea6caabd1f5b4c21.2592000.1662952993.282335-26634202",
method: "post",
data: {
image: base64FileList,
},
})
.then((response) => {
console.log(this) // 返回vue实例
this.titleppp = response.data.results[0].name
console.log(response)
// alert(response.data.results[0].name)
}
)
.catch(function (error) {
console.log(error);
});
},
},
};
</script>
<style lang="scss" scoped></style>