我无法将图像文件从.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>回答 3
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用户
发布于 2022-02-27 11:56:05
这是我的密码
<input type="file" @change="onFileChange">
onFileChange(e) {
this.sendphoto = e.target.files[0];
},
editUser() {
var self = this;
let formData = new FormData();
formData.append("image" , self.sendphoto )
let config = {
header : {
'Content-Type' : 'multipart/form-data'
}
}
axios.post('/edit-user' , formData , config)
.then(function (response) {
})
.catch(function (error) {
console.log(error);
})
},Stack Overflow用户
发布于 2022-02-27 22:45:47
您正在创建一个FormData对象，但没有在您的Axios请求中发送它。为了发送文件和表单数据，必须将所有内容附加到FormData对象中。
<script>
export default {
data() {
return {
fileSelected: null,
article: {},
};
},
methods: {
addArticle() {
var formData =new FormData();
formData.append('image', this.fileSelected);
formData.append('title', this.article.title);
axios
.post("http://localhost:8000/api/articles", formData)
.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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71280667
复制相关文章
相似问题
腾讯云开发者
