好的现在用.vue实现一下
时间: 2023-08-15 07:43:25 浏览: 40
好的,以下是使用 Vue.js 实现的代码示例:
```html
<template>
<form @submit.prevent="handleSubmit">
<input type="file" ref="fileInput">
<input type="text" v-model="uploadUrl" placeholder="上传的 URL">
<button type="submit">上传文件</button>
</form>
</template>
<script>
export default {
data() {
return {
uploadUrl: ''
}
},
methods: {
handleSubmit() {
const formData = new FormData();
formData.append('file', this.$refs.fileInput.files[0]);
const uploadUrl = this.uploadUrl.trim();
fetch(uploadUrl, {
method: 'POST',
body: formData
})
.then(response => {
console.log('上传成功');
})
.catch(error => {
console.error('上传失败', error);
});
}
}
}
</script>
```
在上面的代码示例中,我们使用了 Vue.js 的模板语法来定义表单。在 JavaScript 部分,我们使用 `FormData` 对象获取表单数据,并使用 `fetch` API 发送了一个 POST 请求到上传的 URL。注意,在 Vue.js 中,需要使用 `@submit.prevent` 来阻止表单的默认提交行为。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)