<template>
<view>
<view class="button-row">
<button size="mini" @click="chooseFromAlbum">从相册选择</button>
<button size="mini" @click="takePhoto">拍照</button>
<button size="mini" @click="upload">上传</button>
</view>
<image class="image" :src="imageSrc" mode="aspectFit"></image>
<image class="output-image" :src="outputImagePath" mode="aspectFit" v-if="outputImagePath"></image>
</view>
</template>
<script>
export default {
data() {
return {
imageSrc: '',
outputImagePath: '',
};
},
methods: {
chooseFromAlbum() {
// 从相册选择图片
uni.chooseImage({
count: 1,
sourceType: ['album'],
success: (res) => {
this.imageSrc = res.tempFilePaths[0];
}
});
},
takePhoto() {
// 拍照
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: (res) => {
this.imageSrc = res.tempFilePaths[0];
}
});
},
upload() {
// 上传图片
if (!this.imageSrc) {
uni.showToast({
title: '请选择图片',
icon: 'none'
});
return;
}
uni.uploadFile({
url: 'http://192.168.1.111:5555/predict',
filePath: this.imageSrc,
name: 'file',
success: (res) => {
console.log(res.data);
uni.showToast({
title: '上传成功',
icon: 'success'
});
// 获取服务器返回的图片路径
const responseData = JSON.parse(res.data);
this.outputImagePath = responseData.outputImagePath;
},
fail: (err) => {
console.log(err);
uni.showToast({
title: '上传失败',
icon: 'none'
});
}
});
}
}
};
</script>
<style>
.button-row {
display: flex;
justify-content: space-evenly;
margin-bottom: 20px;
}
.image {
width: 400px;
height: 400px;
}
.output-image {
width: 400px;
height: 400px;
}
</style>

h***@126.com
- 发布:2023-07-02 17:40
- 更新:2023-07-03 09:28
- 阅读:184





Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序
这种得看上传接口返回的值,需要打印看看