uni-app实现上传图片并显示【跨平台开发教程uniapp教程（米饭科技-app小程序h5源码）】

uni-app上传图片并显示

实现代码

你可以使用uniapp内置的上传图片组件，然后使用img标签来显示上传后的图片。

具体步骤如下：

1. 在你的页面中引入上传图片组件：

<template>
  <div>
    <uni-upload :url="uploadUrl" @success="successUpload">
      <button>上传图片</button>
    </uni-upload>
    <img :src="imageUrl" />
  </div>
</template>

<script>
  import uniUpload from '@/components/uni-upload/uni-upload.vue'
  export default {
    components: {
      uniUpload
    },
    data () {
      return {
        uploadUrl: 'http://your-upload-url.com',
        imageUrl: ''
      }
    },
    methods: {
      successUpload (res) {
        // 上传成功后，获取图片链接并显示
        this.imageUrl = res.data.url
      }
    }
  }
</script>

2. 在data中定义uploadUrl和imageUrl。其中uploadUrl是上传图片的接口地址，imageUrl是用于显示图片链接的变量。

3. 在successUpload方法中获取上传成功后返回的图片链接，并将其赋值给imageUrl。

4. 在模板中使用uni-upload组件，并传入uploadUrl和successUpload方法。在img标签中使用imageUrl来显示上传后的图片链接。

注意：上传图片需要后台提供相关接口支持，因此你需要根据你的实际情况修改uploadUrl。同时，需要根据你的实际情况修改successUpload方法中的代码。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：

可添加学习会员小助手咨询（微信：mifankeji77）