iview获取_.NET Core+IView+Vue集成上传图片功能

女爷i 2022-10-28 10:22 237阅读 0赞

(给DotNet加星标，提升.Net技能)

> 转自：张子阳
> 
> cnblogs.com/ZaraNet/p/10212821.html

项目里有上传图片的功能，当然这个功能在项目里是必须要有的，那么目前这个项目是使用完全的前后端分离。

在选择文件上传的组件中还是选择了全面支持Vue的IView，任何上传图片都是通过HTTP请求，服务端从request中读，那么思路有了，直接创建webAPI项目吧。

一般来说,在.NET Core中静态文件应该放到wwwroot，在其中创建一个文件夹。

![f3b1b6ec6af6ebb4f1de496f19655512.png][]

再做好跨域的东西，一般都是通过cors包。创建控制器，代码如下：

public class IndexController : ControllerBase
    {
         
        [HttpPost]
        public async Task<bool> InsertPicture([FromServices]IHostingEnvironment environment){
         
            var data = new PicData();
            string path = string.Empty;
            var files = Request.Form.Files;
            if (files == null || files.Count() <= 0) { data.Msg = "请选择上传的文件。"; return false; }
            //格式限制
            var allowType = new string[] { "image/jpg", "image/png","image/jpeg"};
            if (files.Any(c => allowType.Contains(c.ContentType)))
            {
         
                if (files.Sum(c => c.Length) <= 1024 * 1024 * 4)
                {
         
                    foreach (var file in files)
                    {
         
                        string strpath = Path.Combine("Upload", DateTime.Now.ToString("MMddHHmmss") + file.FileName);
                        path = Path.Combine(environment.WebRootPath, strpath);
                        using (var stream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.ReadWrite))
                        {
         
                            await file.CopyToAsync(stream);
                        }
                    }
                    data.Msg = "上传成功";
                    return true;
                }
                else
                {
         
                    data.Msg = "图片过大";
                    return false;
                }
            }
            else
            {
         
                data.Msg = "图片格式错误";
                return false;
            }
        }
    }
    public class PicData
    {
         
        public string Msg { get; set; }
    }

**代码解读：**

读取wwwroot是在IHostingEnvironment对象中的，如果不通过依赖注入，就需要直接写成参数，那么file上传的参数开头都应该\[FromServices\]来修饰，在代码中判断了响应的文件格式、文件大小，通过file.copy就把文件保存在了服务器。

**需要跨域：**

public void ConfigureServices(IServiceCollection services){
         
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        services.AddCors(options =>
        {
         
            options.AddPolicy("hehe", p => p.AllowAnyMethod()// 允许任何方法 GET,POST,PUT,DELETE, OPTIONS
                        .AllowAnyHeader()       // 允许任何请求头
                        .AllowAnyOrigin()       // 允许任何地址
               );
        });
    }
    
    //This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env){
         
        app.UseStaticFiles(); app.UseCors("hehe");
        if (env.IsDevelopment())
        {
         
            app.UseDeveloperExceptionPage();
        }
        app.UseMvc();
    }

**前台：**

<template>
        <div>
            <Uploadmultipletype="drag"action="http://localhost:54331/api/Index">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff">Icon>
                <p>点击或将文件拖拽到这里上传p>
            div>
        Upload>
        div>
    template>
    <script>export default {
         
    }script>

**代码解读:：**

前台是非常简单的，在main.js中引用Iview，当然这一切的前提都需要Npm一下它.iview的这个组件，action就是你请求的方法，默认呢就是post请求。

那么Iview还有别的属性，详见下方。

![8da2ecf6b0b421eb4293db572b8acc45.png][]

**效果图：**

![bcf175141cb43e789e74a45992c86665.png][]

**文末：**

后来我们团队考虑到使用七牛这个在线储存图片站点，准备好实名的账号和sdk,获取AccessKey，SecretKey。

登录七牛管理后台->个人信息->秘钥管理

那么官方给我们提供了.NET Core 的版本直接nuget就可以了。

![da5dc95b49feba814fbc72ab2cf6787b.png][]

**代码：**

/// 
    /// 实现将文件上传到七牛云
    /// 
    /// 文件流
    /// 文件名称
    /// 
    public UploadQiNiuResult UploadImgToQiNiu(byte[] stream, string fileName){
         
        Mac mac = new Mac(BlogStatic.QiNiuInfo_AccessKey, BlogStatic.QiNiuInfo_SecretKey);
        // 上传策略，参见
        // https://developer.qiniu.com/kodo/manual/put-policy
        PutPolicy putPolicy = new PutPolicy();
        // 如果需要设置为"覆盖"上传(如果云端已有同名文件则覆盖)，请使用 SCOPE = "BUCKET:KEY"
        // putPolicy.Scope = bucket + ":" + saveKey;
        var saveKey = string.Format("BlogImg/{0}/", DateTime.Now.ToString("yyyy/MM/dd")) + fileName;
        putPolicy.Scope = "blog:" + saveKey;
        // 上传策略有效期(对应于生成的凭证的有效期)
        putPolicy.SetExpires();
        // 上传到云端多少天后自动删除该文件，如果不设置(即保持默认默认)则不删除
        // putPolicy.DeleteAfterDays = 1;
        string jstr = putPolicy.ToJsonString();
        //获取上传凭证
        var uploadToken = Auth.CreateUploadToken(mac, jstr);
        UploadManager um = new UploadManager();
        HttpResult result = um.UploadData(stream, saveKey, uploadToken);)
        {
         
            return JsonConvert.DeserializeObject(result.Text);
        }return null;
    }

**UploadQiNiuResult类**

public class UploadQiNiuResult
    {
         
        public string Hash { get; set; }
        public string Key { get; set; }
    }

**推荐阅读**

(点击标题可跳转阅读)

.NET关于人脸识别引擎分享

部署ASP.NET Core应用到k8s集群

.NET Core WebAPI下Swagger增加导出离线文档功能

看完本文有收获？请转发分享给更多人

关注「DotNet」加星标，提升.Net技能

![dc6038c0baf7cba7c2182477aa0c42d4.png][]

喜欢就点一下「好看」呗~

[f3b1b6ec6af6ebb4f1de496f19655512.png]: /images/20221024/f244aad3c5664e97b57fc410aacc72a8.png
[8da2ecf6b0b421eb4293db572b8acc45.png]: /images/20221024/3c3a62b3f4244c35830ab4c68587856f.png
[bcf175141cb43e789e74a45992c86665.png]: /images/20221024/f68429c778294580a59f9ca61be04b68.png
[da5dc95b49feba814fbc72ab2cf6787b.png]: /images/20221024/2150247c0bab4a2d9aa35e293c9238da.png
[dc6038c0baf7cba7c2182477aa0c42d4.png]: /images/20221024/06af5ce20ed9422983fc5afe8cd0c2e9.png