uniapp中用form表单上传文件
时间: 2023-05-23 07:04:59 浏览: 676
A:在uniapp中,可以使用原生的表单控件来上传文件,即使用`<input type="file">`元素。具体操作如下:
1. 在vue文件中添加表单元素,如下所示:
```
<form>
<label>选择文件:</label>
<input type="file" accept="image/*" @change="handleUpload">
</form>
```
2. 在method中,编写上传文件的方法,如下所示:
```
methods: {
handleUpload(event) {
let file = event.target.files[0];
//创建formData对象
let formData = new FormData();
//将选择的文件添加到formData中
formData.append('file', file);
//发送ajax请求上传文件
uni.request({
url: 'http://localhost:8080/upload',
method: 'POST',
header: {
'content-type': 'multipart/form-data'
},
data: formData,
success: (res) => {
console.log(res.data);
}
})
}
}
```
注意事项:
1. 必须将`content-type`设置为`multipart/form-data`。
2. `FormData`对象用于创建一组键值对,用于表示表单的某些键值对,可以通过`FormData.append()`方法添加一个新的键值对到`FormData`对象中。
3. 在`@change`事件中,通过`event.target.files[0]`获取选择的文件。
4. 发送ajax请求上传文件,注意要设置`method`为`POST`,并将`formData`作为`data`发送请求。
阅读全文
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![txt](https://img-home.csdnimg.cn/images/20241231045021.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)