结合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
。在成功和失败的回调函数中,你可以根据实际情况处理上传成功和上传失败后的逻辑。