怎么用ts语言实现用按钮上传照片
时间: 2024-05-09 10:20:38 浏览: 7
以下是使用TypeScript语言实现上传照片的示例代码。
HTML代码:
```html
<input type="file" id="fileInput">
<button id="uploadBtn">上传</button>
```
TypeScript代码:
```typescript
const fileInput = document.getElementById('fileInput') as HTMLInputElement;
const uploadBtn = document.getElementById('uploadBtn') as HTMLButtonElement;
uploadBtn.addEventListener('click', () => {
const file = fileInput.files[0];
if (file) {
const formData = new FormData();
formData.append('photo', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
console.log('上传成功!');
} else {
console.error('上传失败:' + response.statusText);
}
})
.catch(error => {
console.error('上传出错:' + error);
});
} else {
console.error('请选择要上传的照片!');
}
});
```
这段代码使用了Fetch API来进行网络请求,将选择的照片作为FormData的一部分发送到服务器。在实际使用中,需要根据具体的情况来修改上传路径和上传参数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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_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)
![](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)