uniapp上传图片功能怎么实现？

结合uni.chooseImage和uni.uploadFile方法来实现

<template>
  <view>
    <image :src="imageUrl" mode="aspectFill" @click="selectImage"></image>
  </view>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: '可以加默认图片 因为本身是没有图片的'
    }
  },
  methods: {
    selectImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.uploadImage(tempFilePath);
        }
      });
    },
    uploadImage(filePath) {
      uni.uploadFile({
        url: '示例接口',
        filePath: filePath,
        name: 'file',
        success: (res) => {
          const data = JSON.parse(res.data);
          if (data.code === 200) {
            this.imageUrl = data.url;
            console.log('上传成功:', this.imageUrl);
            // 处理上传成功后的逻辑
          } else {
            console.log('上传失败:', data.msg);
            // 处理上传失败后的逻辑
          }
        },
        fail: (err) => {
          console.log('上传失败:', err);
          // 处理上传失败后的逻辑
        }
      });
    }
  }
}
</script>

总结：我们使用image组件来展示已选择的图片，通过绑定imageUrl来动态显示图片

当点击图片时，会触发selectImage方法，在该方法中调用uni.chooseImage来选择图片。选择成功后，将获取到的临时文件路径传给uploadImage方法以进行上传操作。

uploadImage方法使用uni.uploadFile来上传图片文件。在请求配置中，指定了接口的URL、要上传的文件路径filePath、上传文件的字段名name。在成功和失败的回调函数中，你可以根据实际情况处理上传成功和上传失败后的逻辑。