我无法将图像文件从.vue上传到我的数据库
我无法将图像文件从.vue上传到我的数据库
提问于 2022-02-26 22:12:04
我和Laravel一起使用Vue，我试着做一个简单的crud，它对文章的标题或描述(文本字段)有很好的效果，但是当我试图发送一个图像文件时，它不起作用。我试过formData，但没有用。
这是我在模板中的表单，标题在数据库中没有问题，如果我控制台日志selectedFile，那么它将显示正确选择的文件，但是addArticle方法没有附加图像。
<form @submit.prevent="addArticle" class="container">
<label>Title</label>
<input type="text" v-model="article.title" />
<label>Image</label>
<input type="file" v-on:change="selectedFile" />
<button type="submit">Create</button>
</form>这是我的剧本
<script>
export default {
data() {
return {
fileSelected: null,
article: {},
};
},
methods: {
addArticle() {
var formData =new FormData();
formData.append(this.article.image, this.fileSelected);
axios
.post("http://localhost:8000/api/articles", this.article)
.then((response) => this.$router.push({ name: "ArticlesList" }))
.catch((err) => console.log(err))
.finally(() => (this.loading = false));
}
,
selectedFile(event) {
this.fileSelected = event.target.files[0];
},
},
};
</script>Stack Overflow用户
回答已采纳
发布于 2022-02-28 14:15:55
这在将图像文件作为字符串发送到数据库中起了作用，希望它能帮助其他有类似问题的人。
setup() {
const base64 = ref()
const changeFile= async(event) => {
const file = event.target.files[0];
base64.value = await convertBase64(file);
}
const convertBase64 = (file) => {
return new Promise ((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
resolve(fileReader.result)
}
fileReader.onerror = (error) => {
reject(error)
}
})
}
const form = reactive({
title: " ",
body: " ",
image: base64,
})
const submitForm = () => {
axios.post("http://localhost:8000/api/articles", form)
}
return { changeFile, submitForm, form}
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71280667
复制相关文章
相似问题
腾讯云开发者
