uniapp小程序上传文件
时间: 2023-10-02 16:13:55 浏览: 45
在 uniapp 中,可以使用 uni.uploadFile 方法来上传文件。该方法的语法如下:
```
uni.uploadFile({
url: '', // 上传文件的接口地址
filePath: '', // 要上传文件的本地路径
name: '', // 上传文件对应的 key,服务器可以通过这个 key 获取到文件
formData: {}, // HTTP 请求中其他额外的 form data
success: function (res) {},
fail: function (err) {}
})
```
其中,url 是上传文件的接口地址,filePath 是要上传文件的本地路径,name 是上传文件对应的 key,服务器可以通过这个 key 获取到文件。formData 是 HTTP 请求中其他额外的 form data,可以在服务器端通过 $_POST 获取到。
具体实现步骤如下:
1. 在页面中添加一个选择文件的按钮,使用 `uni.chooseImage()` 方法选择文件,并将选择的文件路径保存到变量中。
```
<template>
<view>
<button @tap="chooseFile">选择文件</button>
</view>
</template>
<script>
export default {
data() {
return {
filePath: '', // 要上传的文件路径
}
},
methods: {
chooseFile() {
uni.chooseImage({
success: (res) => {
this.filePath = res.tempFilePaths[0]
}
})
}
}
}
</script>
```
2. 使用 `uni.uploadFile()` 方法上传文件,并将上传结果显示到页面上。
```
<template>
<view>
<button @tap="chooseFile">选择文件</button>
<button @tap="uploadFile">上传文件</button>
<text>{{uploadResult}}</text>
</view>
</template>
<script>
export default {
data() {
return {
filePath: '', // 要上传的文件路径
uploadResult: '', // 上传结果
}
},
methods: {
chooseFile() {
uni.chooseImage({
success: (res) => {
this.filePath = res.tempFilePaths[0]
}
})
},
uploadFile() {
uni.uploadFile({
url: 'http://example.com/upload',
filePath: this.filePath,
name: 'file',
formData: {
'user': 'test'
},
success: (res) => {
this.uploadResult = '上传成功,服务器返回:' + res.data
},
fail: (err) => {
this.uploadResult = '上传失败,错误信息:' + err.errMsg
}
})
}
}
}
</script>
```
在上传文件时,需要将要上传的文件路径传递给 `uni.uploadFile()` 方法,并将上传结果显示到页面上。如果上传成功,页面将显示上传成功的提示信息以及服务器返回的数据;如果上传失败,页面将显示上传失败的提示信息以及错误信息。