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

为什么我的这段代码能把图片上传到服务器上,但是却不能接收服务器返回的图片,是我的uniapp代码写错了还是服务器端有问题?

分类:HBuilderX
<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>
2023-07-02 17:40 负责人:无 分享
已邀请:
Diligent_UI

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

这种得看上传接口返回的值,需要打印看看

要回复问题请先登录注册