<template>
<div>
<input type="file" ref="fileInput" @change="handleFileUpload">
<button @click="submit">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
}
},
methods: {
handleFileUpload() {
this.file = this.$refs.fileInput.files[0]
},
submit() {
let formData = new FormData()
formData.append('file', this.file)
formData.append('path', 'image')
// 发送上传请求
this.$axios
.post('upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then((response) => {
// 处理上传成功后的响应
})
.catch((error) => {
// 处理上传失败后的响应
})
}
}
}
</script>
vue实现图片上传,使用h5纯标签进行上传,一定要设置请求头,告诉服务器是formdata类型
最新推荐文章于 2025-03-21 11:55:20 发布