web-dev-qa-db-ja.com

ASP.NETCoreでAxiosとVue.JSを使用した複数ファイルのアップロード

Vue.jsとaxiosを使用して複数のファイル/画像をアップロードしようとしています。私のバックエンドはASP.NETCoreです。しかし、問題は、リクエストメソッドにブレークポイントを設定すると、コントローラーで常にCount = 0になることです。

これが私の単純なHTMLと私のコードです：

HTML

<div id="app">
    <form enctype="multipart/form-data">
        <input type="file" name="file" multiple="" v-on:change="fileChange($event.target.files)"/>
        <button type="button" @@click="upload()">Upload</button>
    </form>
</div>

私のJS

import axios from "axios"

var app= new Vue({
el: "#app",
data: {
    files: new FormData()
},
methods:{
    fileChange(fileList) {
        this.files.append("file", fileList[0], fileList[0].name);
    },
    upload() {
        const files = this.files;
        axios.post(`/MyController/Upload`, files,
            {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(response => {
                alert(response.data);
            }).catch(error => {
                console.log(error);
            });
    },
}

私のコントローラー

public IActionResult Upload(IList<IFormFile> files)
{
    return Json("Hey");
}

何か助けてください？

file-uploadvue.jsasp.net-core-mvcaxios
6
jsonGPPD

このgithubリポジトリはあなたに役立つかもしれません Vue.JSとAxiosを使用したASP.NETコアFileUpload

基本的に、彼はIFormCollection filesの代わりにIList<IFormFile> filesを使用しました

9
mark333...333...333

私も同じ問題を抱えていました。私にとっての修正は、代わりにリクエストを確認することでした。 Formプロパティがあり、そこにファイルがあります。これが私のために働いたコードスニペットです。

そして、クレジットが必要な場所にクレジットを与えるために：私は答えを見つけました このブログ投稿で 。それは約Angularであり、コードスニペットはそこからのものです。

[HttpPost]
public IActionResult UploadLogo()
{
    try
    {
        var file = Request.Form.Files[0];
        string folderName = "Upload";
        string webRootPath = _hostingEnvironment.WebRootPath;
        string newPath = Path.Combine(webRootPath, folderName);
        if (!Directory.Exists(newPath))
        {
            Directory.CreateDirectory(newPath);
        }
        if (file.Length > 0)
        {
            string fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
            string fullPath = Path.Combine(newPath, fileName);
            using (var stream = new FileStream(fullPath, FileMode.Create))
            {
                file.CopyTo(stream);
            }
        }
        return Json("Upload Successful");
    }
    catch (System.Exception ex)
    {
        return Json("Upload Failed: " + ex.Message);
    }
}
0
bcnzer