要在UniApp中上传图片,可以使用uni.uploadFile()方法。以下是一个简单的示例代码:
<template> <view class="container"> <image :src="imageUrl" mode="aspectFit"></image> <button @click="chooseImage">选择图片</button> <button @click="uploadImage">上传图片</button> </view> </template> <script> export default { data() { return { imageUrl: '' } }, methods: { chooseImage() { uni.chooseImage({ count: 1, success: (res) => { this.imageUrl = res.tempFilePaths[0]; } }) }, uploadImage() { uni.uploadFile({ url: 'https://example.com/upload', // 上传接口地址 filePath: this.imageUrl, name: 'file', success: (res) => { console.log('上传成功:', res); }, fail: (err) => { console.log('上传失败:', err); } }) } } } </script>
这个示例包含一个图片预览组件、两个按钮和两个方法:chooseImage和uploadImage。点击“选择图片”按钮会调用uni.chooseImage()方法,从本地相册中选择一张图片并显示在预览组件中。点击“上传图片”按钮会调用uni.uploadFile()方法,将当前选中的图片上传到指定的服务器端接口。
注意事项:
在示例中使用了箭头函数,确保this指向正确。
调用uni.chooseImage()方法时可以设置count参数,限制用户选择的图片数量。
调用uni.uploadFile()方法时需要设置url参数,指定上传接口的地址。
上传成功后会返回一个带有服务器端文件路径等信息的res对象;上传失败则会返回错误信息err对象。
更多细节请参考UniApp官方文档:上传文件。