WebApi单html页面使用axios进行文件上传

狂人开飞机

已于 2023-05-30 14:45:22 修改

阅读量263

点赞数

分类专栏： WebApi 文章标签： html c# web vue

于 2023-05-30 14:43:37 首次发布

本文链接：https://blog.csdn.net/qq_45859942/article/details/130947500

版权

WebApi 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文件上传和下载

1、单文件上传

后端代码：

[HttpPost("/upload2")]
public  string UploadFile2([FromForm] IFormFile file)
{
    if (file != null)
    {
        var fileDir = "D://picture/";
        if (!Directory.Exists(fileDir))
        {
            Directory.CreateDirectory(fileDir);
        }
        //上传的文件的路径
        string filePath = fileDir +file.FileName;
        using (var fs = System.IO.File.Create(filePath))
        {
            file.CopyTo(fs);
        }
        return "上传成功";
    }
    else
    {
        return "上传失败";
    }
}

或者通过 Request.Form.Files[0]获取到文件对象
    
[HttpPost("/upload2")]
public  string UploadFile2()
{
    var file = Request.Form.Files[0];
}

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue3</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="file" ref="fileInput"/>
        <input type="button" value="上传" @click="upload"/>
    </div>
</body>
<script>
    const { createApp, ref } = Vue
    const app = createApp({
        setup() {
            const fileInput = ref(null);
            const upload=function(){      
                const files = fileInput.value.files;
                if(files.length<=0)return;
                const file = files[0];
                const formData = new FormData();
                formData.append("file", file);
                axios.post("http://localhost:5102/upload2", formData).then(
                    res=>{
                        console.log(res)
                    }
                )
            }
            return {
                upload,
                fileInput
            }
        }
    })
    app.mount("#app")
</script>
</html>

2、多文件上传

注意：input标签中的multiple属性设置后可以选择多个文件

后端代码：

[HttpPost("/upload3")]
public string upload()
{
    IFormFileCollection form= Request.Form.Files;
    if (form!=null)
    {
        foreach (FormFile file in form)
        {
            if (file != null)
            {
                string fileDir = "D://picture1/";
                if (!Directory.Exists(fileDir))
                {
                    Directory.CreateDirectory(fileDir);
                }
                string filePath = fileDir + file.FileName;
                using (var fileStream = System.IO.File.Create(filePath))
                {
                    file.CopyTo(fileStream);
                }
            }
        }
        return "上传成功";
    }
    return "上传失败";
}

前端代码：

<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue3</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="file" ref="fileInput" multiple="multiple"/>
        <input type="button" value="上传" @click="upload"/><br/>
        {{ message }}
    </div>
</body>
<script>
    const { createApp, ref } = Vue
     const app = createApp({
        setup() {
            const fileInput = ref(null);
            const message=ref('')
            const upload= function(){      
                const files = fileInput.value.files;
                var formData = new FormData();
                for(var i in files){
                    formData.append('file',files[i])
                }
                axios.post("http://localhost:5146/upload3", formData).then(
                    res=>{
                        message.value=res.data
                    }
                )
            }
            return {
                message,
                upload,
                fileInput
            }
        }
    })
    app.mount("#app")
</script>
</html>