</form> <h1>文件上传</h1> <form action="/file/upload.demo" method="post" enctype="multipart/form-data"> 请选择文件:<input type="file" name="myFile"/><br> <button type="submit">上传文件</button> </form>改写成vue
时间: 2023-02-16 15:13:35 浏览: 69
<template>
<div>
<h1>文件上传</h1>
<form ref="form" @submit.prevent="upload" enctype="multipart/form-data">
请选择文件:<input type="file" ref="file" name="myFile"/><br>
<button type="submit">上传文件</button>
</form>
</div>
</template>
<script>
export default {
methods: {
upload() {
let formData = new FormData(this.$refs.form)
let file = this.$refs.file.files[0]
formData.append('myFile', file)
axios.post('/file/upload.demo', formData).then(response => {
console.log(response)
})
}
}
}
</script>
这是改写成 Vue 的示例代码。使用了 axios 来发送 post 请求,需要安装 axios 库。使用 ref 来引用表单和文件输入框,在上传事件里组装表单数据并发送请求。
相关问题
<!DOCTYPE html><html><head> <title>文件上传页面</title></head><body> <h1>文件上传</h1> <form action="/upload" method="post" enctype="multipart/form-data"> <label for="file">选择文件:</label> <input type="file" id="file" name="file"><br><br> <input type="submit" value="上传"> </form></body></html>这段代码怎么改才能上传图片
如果想要上传图片,只需要在 input 标签中加上 accept 属性并设置为 "image/*" 即可,如下所示:
```
<!DOCTYPE html>
<html>
<head>
<title>文件上传页面</title>
</head>
<body>
<h1>文件上传</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">选择文件:</label>
<input type="file" id="file" name="file" accept="image/*"><br><br>
<input type="submit" value="上传">
</form>
</body>
</html>
```
这样用户在上传文件时只能选择图片文件,其他类型的文件将被过滤掉。
<form th:action="@{/file/upload}" method="post" enctype="multipart/form-data"> <table> <tr> <td><input type="file" name="file" multiple="multiple" /></td> </tr> <tr> <td><input type="submit" value="提交"/></td> </tr> <hr> </table> </form> 变成Elemnt_ui的axios
在使用Element UI和axios的情况下,你可以按照以下方式将上述表单转换为Element UI的形式,并使用axios进行提交:
```html
<template>
<el-form ref="uploadForm" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="选择文件">
<el-upload
action="/file/upload"
:multiple="true"
:on-success="handleSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
form: {
file: null
},
rules: {
file: [
{ required: true, message: '请选择文件', trigger: 'change' }
]
}
};
},
methods: {
handleSuccess(response, file, fileList) {
// 文件上传成功后的处理逻辑
// 可以在这里更新表单的数据或者显示上传成功的提示信息
},
submitForm() {
this.$refs.uploadForm.validate(valid => {
if (valid) {
// 表单验证通过
const formData = new FormData();
formData.append('file', this.form.file);
axios.post('/file/upload', formData)
.then(response => {
// 提交成功后的处理逻辑
})
.catch(error => {
// 提交失败后的处理逻辑
});
}
});
}
}
};
</script>
```
这样,你就可以使用Element UI和axios将文件上传表单转换并提交了。请注意替换`/file/upload`为你实际的上传接口地址。同时,还需要根据实际需求进行错误处理、上传成功后的逻辑等操作。