如何在uniapp中实现图片上传和预览

<template><view><image v-for="(item, index) in images" :key="index" :src="item.url"></image><button>选择图片</button>    <button>上传图片</button>  </view></template><script>  export default {    data() {      return {        images: [], // 用于存储选择的图片      }    },    methods: {      chooseImage() {        uni.chooseImage({          count: 9, // 最多选择9张图片          success: (res) => {            this.images = this.images.concat(res.tempFilePaths)          }        })      },      uploadImage() {        this.images.forEach((item, index) => {          uni.uploadFile({            url: 'http://example.com/upload', // 上传图片的接口地址            filePath: item,            name: 'file',            success: (res) => {              console.log(res.data) // 上传成功后的返回数据            }          })        })      }    }  }</script>

<template><view><image v-for="(item, index) in images" :key="index" :src="item.url"></image><button>选择图片</button>    <button>上传图片</button>  </view></template><script>  export default {    data() {      return {        images: [], // 用于存储选择的图片      }    },    methods: {      chooseImage() {        uni.chooseImage({          count: 9, // 最多选择9张图片          success: (res) => {            const tempImages = res.tempFilePaths.map((item) => {              return {                url: item              }            })            this.images = this.images.concat(tempImages)          }        })      },      uploadImage() {        // 省略上传图片的代码      },      previewImage(index) {        const urls = this.images.map((item) => {          return item.url        })        uni.previewImage({          urls: urls,          current: index // 当前预览的图片索引        })      }    }  }</script>