无法将文件从Axios发送到.net核心应用程序接口(vue-nuxt)
无法将文件从Axios发送到.net核心应用程序接口(vue-nuxt)
提问于 2019-05-22 10:15:33
如果我尝试将一个文件从Vue发送到我在.net核心中的API端点，我得到500个错误。
我遵循了执行此操作的教程，但它们似乎不适用于此设置。
.net核心接口：
[Route("api/[controller]")]
[ApiController]
public class FileUploadController : ControllerBase
{
[HttpPost("[Action]")]
public string sendFiles([FromBody]FileUploadAPI file)
{
return "Yes!";
}
public class FileUploadAPI
{
public IFormFile File { get; set; }
}
}Vue：
this.$axios.post(
'https://localhost:44352/api/fileupload/sendFiles',
event.target.files[0],
)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); 我希望收到状态代码为500的API请求失败时的文件
回答 2
Stack Overflow用户
发布于 2019-05-22 10:55:28
你会得到一个404错误，因为你使用了错误的URL。
您的操作名称是URL (复数)，因此正确的sendFiles路径应该是/api/FileUpload/sendFiles。
Axios能够将FormData作为multipart/form-data请求正确处理。您不需要设置headers (无论如何都是不正确的)，也不应该将data包装在对象中。
let data = new FormData();
data.append('file', files[0]); // assuming "files" refers to a FileList
this.$axios.post('https://localhost:44352/api/FileUpload/sendFiles', data)
.then(...)Stack Overflow用户
发布于 2019-05-22 18:09:09
下面的示例代码片段可能对您有所帮助。在其中，我使用了vuetify、vue- upload -component和axios来上传图像。
<template lang="html">
<div class="imageUploader">
<!-- <v-card> -->
<!-- <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active"></div> -->
<div class="avatar-upload">
<div class="text-center p-2">
<div class="avatar-container">
<div class="no-image" v-if="files.length === 0 && file == ''">
<v-icon>cloud_upload</v-icon>
</div>
<template v-else>
<img :src="file" alt="">
</template>
</div>
</div>
<div class="text-center p-2">
<v-btn class="browse-btn" flat>
<file-upload
extensions="gif,jpg,jpeg,png,webp"
accept="image/png,image/gif,image/jpeg,image/webp"
name="avatar"
v-model="files"
@input="uploadImage"
ref="upload">
Choose File
</file-upload>
</v-btn>
</div>
</div>
<!-- </v-card> -->
</div>
</template>
<script>
import Cropper from 'cropperjs'
import VueUploadComponent from 'vue-upload-component'
//import axios from 'axios'
export default {
components: {
'file-upload': VueUploadComponent
},
props: ['order', 'imageURL'],
data() {
return {
dialog: false,
files: [],
edit: false,
cropper: false,
file: '',
}
},
mounted() {
if (this.imageURL) {
this.file = this.$baseURL+'document/downloadimage/' + this.imageURL
}
},
watch: {
imageURL() {
if (this.imageURL) {
this.file = this.$baseURL+'document/downloadimage/' + this.imageURL
}
},
},
methods: {
**uploadImage(file) {
let formData = new FormData();
formData.append('file', file[0].file);
axios.post(axios.defaults.baseURL + 'document/uploadimage', formData, {headers: {'Content-Type': 'multipart/form-data'}})
.then((response) => {
this.dialog = false
this.$emit('upload', {id: response.data.result[0].objectId, order: this.order})
this.file = this.$baseURL+'document/downloadimage/' + response.data.result[0].objectId
let reader = new FileReader()
reader.readAsDataURL(file[0].file)
reader.onload = () => {
let base64 = reader.result.split(',')[1]
this.$emit('base64', base64)
}
this.getDimensions(this.$baseURL+'document/downloadimage/' + response.data.result[0].objectId, (result) => {
this.$emit('dimensions', {width: result.width, height: result.height})
})
})
.catch((error) => {
console.log(error)
})
},**
getDimensions(url, callback) {
var img = new Image();
img.src = url
img.onload = function() {
var result = {width: this.width, height: this.height}
callback(result)
}
}
},
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56248445
复制相关文章
相似问题
腾讯云开发者
