在 c# mvc 中从 axios 接收文件

Question

我尝试搜索了几个小时但没有成功我有一个 mvc/vue/quasar 应用程序，我尝试通过按钮上传照片在我的 cshtml 文件中

 <q-input type="file" ref="myFileAvatar" v-on:change="handleFileUpload()" v-model="avatar" style="display:none" accept="image/*"/>
 <q-btn round color="primary" icon="cloud_upload" @click="getAvatar" ></q-btn >

我从我的 js 方法部分发送文件

 getAvatar: function () {this.$refs.myFileAvatar.$el.click()},
 handleFileUpload() {
        //const files = Array.from(this.avatar).filter((file) => { return file.size < 102500 && file.type.substring(0, 6) == 'image/' });
        let formData = new FormData();
        formData.append('ownerID', this.profildata.ownerid);
        formData.append('file', this.avatar);
        axios.post('/forms/default/uploadProfilImage', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
            .then(function (response) {
            //TODO
        });
    }

在我的控制器中

 public JsonNetResult uploadProfilImage(Guid ownerID, HttpPostedFileBase file)
    {
        resultModel resultUpload = new resultModel();
        if (this.Request.Files != null && this.Request.Files.Count == 1)//My old version with q-uploader
        {

        }
        else { resultUpload.status = resultMessage.resultValue.error; resultUpload.message = "Oups, ou sont les fichiers"; }
        return JsonNetResult.JsonNet(resultUpload);
    }

问题：即使在 chrome 的开发者模式下，文件也为空，我看到文件是一个 FileList ownerID 很好......我尝试了几种类型而不是 HttpPostedFileBase 但什么都没有（execpt 对象给出一个字符串数组......）感谢您的帮助

Answer 1

终于…… 和我想的一样是参数问题

handleFileUpload() {
        if (this.avatar[0].size < 102500 && this.avatar[0].type.substring(0, 6) == 'image/') {
            let formData = new FormData();
            formData.append('file', this.avatar[0]);//One file
            formData.append('ownerID', this.profildata.ownerid);
            let self = this
            axios.post('/forms/default/uploadProfilImage', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
                .then(function (response) {
                    if (response.data.status == 0) { self.profildata.idFichierAvatar = response.data.model.id; } else { self.showNotifError(response.data.message); }
                    this.avatar = '';
                });
        }
        else { this.showNotifError("L'image ne répond pas aux critères");}
    }

和 mvc 端

[HttpPost]
    public JsonNetResult uploadProfilImage(HttpPostedFileBase file,Guid ownerID )
    {
        resultModel resultUpload = new resultModel();
        if (file != null)
        {
            
        }
        else { resultUpload.status = resultMessage.resultValue.error; resultUpload.message = "Oups, ou sont les fichiers"; }
        return JsonNetResult.JsonNet(resultUpload);
    }

##更新：多个## 对于多个文件在 q-input 中添加多个属性在服务器端：

[HttpPost]
public JsonNetResult uploadProfilImage(HttpPostedFileBase[] files,Guid ownerID )

以及从 js 发送文件

handleFile() {
        let formData = new FormData();
        for (var i = 0; i < this.newfiles.length; i++) {
            let fichier = this.newfiles[i];
            formData.append('files[' + i + ']', fichier);
        }
        formData.append('ownerID', this.ownerid);

        let self = this
        axios.post('/files/joinFile/uploadFiles', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
            .then(function (response) {
                if (response.data.status == 0) { self.files = response.data.model; } else { self.showNotifError(response.data.message); }
                this.newfiles = '';
            });
    }

我希望所有遇到同样问题的人都满了:-)

在 c# mvc 中从 axios 接收文件

Received files from axios in c# mvc

asp.net-mvc

file-upload

file

axios