英文:
.NET & Vue API communication through [FromForm]
问题
以下是您要翻译的代码部分：
I'm trying to send a list of object in which contains IFormFile.
Here are my object :
public class ImageGalleryDto
{
public Guid? PageId { get; set; }
public int? Order { get; set; }
public IFormFile? Image { get; set; }
}
My endpoint in .net core :
public async Task<EndpointResult<object>> UpdateImageGallery([FromForm] List<ImageGalleryDto> imageGalleryDto)
My object in vue is exactly same as with this model. And I'm trying to send like this in vue.js
const formData = new FormData();
formData.append("imageGalleryDto", pushToApi);
this.updateImageGallery(formData).then((res) => {....}
Unfortunately, in the controller, the list is empty when it is called.
英文:
I'm trying to send a list of object in which contains IFormFile.
Here are my object :
public class ImageGalleryDto
{
public Guid? PageId { get; set; }
public int? Order { get; set; }
public IFormFile? Image { get; set; }
}
My endpoint in .net core :
public async Task<EndpointResult<object>> UpdateImageGallery([FromForm] List<ImageGalleryDto> imageGalleryDto)
My object in vue is exactly same as with this model. And I'm trying to send like this in vue.js
const formData = new FormData();
formData.append("imageGalleryDto", pushToApi);
this.updateImageGallery(formData).then((res) => {....}
Unfortunately, in the controller, the list is empty when it is called.
答案1
得分: 1
根据您的描述，似乎与您的表单数据有问题，表单数据应该如下所示，然后ASP.NET Core模型绑定将自动将数据绑定到Web API控制器内的模型。
const formData = new FormData();
this.images.forEach((image, index) => {
formData.append(`imageGalleryDto[${index}].pageId`, image.pageId);
formData.append(`imageGalleryDto[${index}].order`, image.order);
formData.append(`imageGalleryDto[${index}].image`, image.image);
});
详细示例如下：
由于您有vue.js标签，我使用vue.js示例。
客户端：
<div id="app">
<image-upload-form></image-upload-form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
Vue.component('image-upload-form', {
template: `
<div>
<form @submit.prevent="uploadImages" enctype="multipart/form-data">
<div v-for="(image, index) in images" :key="index">
<input type="text" v-model="image.pageId" :name="'images[index].pageId'" placeholder="Page ID"/>
<input type="number" v-model="image.order" :name="'images[index].order'" placeholder="Order"/>
<input type="file" ref="file" :name="'images[index].image'" @change="onFileChange(index,$event)" />
</div>
<button type="submit">Upload Images</button>
</form>
</div>
`,
data() {
return {
images: [{ pageId: '', order: '', image: null }, { pageId: '', order: '', image: null }]
};
},
methods: {
onFileChange(index, event) {
this.images[index].image = event.target.files[0];
},
async uploadImages() {
const formData = new FormData();
this.images.forEach((image, index) => {
formData.append(`imageGalleryDto[${index}].pageId`, image.pageId);
formData.append(`imageGalleryDto[${index}].order`, image.order);
formData.append(`imageGalleryDto[${index}].image`, image.image);
});
try {
const response = await fetch('https://localhost:7204/api/values/upload', {
method: 'POST',
body: formData
});
if (response.ok) {
console.log('Images uploaded successfully');
} else {
console.error('Failed to upload images');
}
} catch (error) {
console.error('Error uploading images', error);
}
}
}
});
new Vue({
el: '#app'
});
</script>
后端：
[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
[HttpPost("upload")]
public async Task<IActionResult> UploadImages([FromForm] List<ImageGalleryDto> imageGalleryDto)
{
// 对imageGalleryDto对象执行某些操作
return new JsonResult("OK");
}
}
结果：
![.NET与Vue之间通过[FromForm]进行API通信](https://i.stack.imgur.com/uR5BU.png)
英文:
According to your description, it looks like there is something wrong with your formdata, the formdata should like below, then the asp.net core model binding will auto bind the data to the model inside the web api controller.
const formData = new FormData();
this.images.forEach((image, index) => {
formData.append(`imageGalleryDto[${index}].pageId`, image.pageId);
formData.append(`imageGalleryDto[${index}].order`, image.order);
formData.append(`imageGalleryDto[${index}].image`, image.image);
});
The details example like below:
Since you have vue.js tag, I use vue.js example
Client:
<div id="app">
<image-upload-form></image-upload-form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
Vue.component('image-upload-form', {
template: `
<div>
<form @submit.prevent="uploadImages" enctype="multipart/form-data">
<div v-for="(image, index) in images" :key="index">
<input type="text" v-model="image.pageId" :name="'images[index].pageId'" placeholder="Page ID"/>
<input type="number" v-model="image.order" :name="'images[index].order'" placeholder="Order"/>
<input type="file" ref="file" :name="'images[index].image'" @change="onFileChange(index,$event)" />
</div>
<button type="submit">Upload Images</button>
</form>
</div>
`,
data() {
return {
images: [{ pageId: '', order: '', image: null }, { pageId: '', order: '', image: null }]
};
},
methods: {
onFileChange(index, event) {
this.images[index].image = event.target.files[0];
},
async uploadImages() {
const formData = new FormData();
this.images.forEach((image, index) => {
formData.append(`imageGalleryDto[${index}].pageId`, image.pageId);
formData.append(`imageGalleryDto[${index}].order`, image.order);
formData.append(`imageGalleryDto[${index}].image`, image.image);
});
try {
const response = await fetch('https://localhost:7204/api/values/upload', {
method: 'POST',
body: formData
});
if (response.ok) {
console.log('Images uploaded successfully');
} else {
console.error('Failed to upload images');
}
} catch (error) {
console.error('Error uploading images', error);
}
}
}
});
new Vue({
el: '#app'
});
</script>
Backend:
[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
[HttpPost("upload")]
public async Task<IActionResult> UploadImages([FromForm] List<ImageGalleryDto> imageGalleryDto)
{
// Do something with the imageGalleryDtos object
return new JsonResult("OK");
}
Result:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论