用uni-app写一个上传图片功能,接口是 http://rep.nanyinet.com/server.php?action=UploadImg post提交
时间: 2023-03-03 12:06:23 浏览: 113
好的,下面是用uni-app编写一个上传图片功能的简单示例,接口是 http://rep.nanyinet.com/server.php?action=UploadImg,采用post提交。
1. 在uni-app的pages文件夹下创建一个新的页面,例如"uploadImg"。
2. 在uploadImg.vue文件中添加以下代码,其中包括了一个选择图片的按钮和一个上传图片的按钮:
```
<template>
<view class="content">
<button @click="chooseImage">选择图片</button>
<button @click="uploadImage">上传图片</button>
</view>
</template>
<script>
export default {
data() {
return {
imagePath: ''
}
},
methods: {
chooseImage() {
uni.chooseImage({
success: (res) => {
this.imagePath = res.tempFilePaths[0]
}
})
},
uploadImage() {
uni.uploadFile({
url: 'http://rep.nanyinet.com/server.php?action=UploadImg',
filePath: this.imagePath,
name: 'file',
success: (res) => {
console.log(res.data)
}
})
}
}
}
</script>
```
3. 在上传图片按钮的点击事件中,使用uni.uploadFile函数来上传选择的图片,其中url是接口地址,filePath是选择的图片路径,name是上传文件的名称。上传成功后,可以在success回调函数中处理返回的数据,这里使用console.log函数来打印返回数据。
以上就是一个简单的用uni-app编写上传图片功能的示例,可以根据实际需求进行修改和完善。
阅读全文