uniapp如何上传图片(静态页面先写死)
时间: 2024-05-31 10:06:00 浏览: 15
在uniapp中上传图片,可以使用uni.uploadFile方法来实现。以下是实现步骤:
1. 在前端页面中添加一个input标签,用于选择图片文件。
2. 在js代码中监听input标签的change事件,在事件回调函数中获取所选图片文件。
3. 使用uni.uploadFile方法将所选图片文件上传到服务器。需要注意的是,该方法需要传入的参数包括:上传接口地址、图片文件对象、请求头部信息、请求参数等。
以下是示例代码:
HTML代码:
```
<input type="file" id="uploadImg">
```
JS代码:
```
document.getElementById('uploadImg').addEventListener('change', function (event) {
var file = event.target.files; // 获取选择的文件对象
uni.uploadFile({
url: 'http://example.com/upload', // 上传接口地址
filePath: file.path, // 图片文件路径
header: { 'content-type': 'multipart/form-data' }, // 请求头部信息
formData: { 'name': 'file' }, // 请求参数
success: function (res) {
console.log(res.data);
}
});
});
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)