Vue+ElementUI、.Net 上传七牛云

提要

我们在写项目的过程中，难免会遇到上传文件的功能，那我们将文件上传到云端的时候，又不能直接从客户的本地去获取，这个时候我们就需要将文件上传到iis当中，再从IIS中上传到服务器中。

废话不多说，直接上代码。

做七牛云中的配置

七牛云 | 简单 可信赖  首先打开七牛云的官网注册一个账号 或登录

使用七牛云的一个好处就是 它每个空间都有自己的域名 且这些域名是免费的

 

进来以后可以看到左上角有一个 菜单按钮 点进去

进来以后可以看到这样的一个页面

 这时候点击左侧的空间管理和新建空间

 

存储区域按照你自己的来即可 这个无要求，输入一个空间名称，访问控制必须为公开。

可以看到我创建完成后的存储空间

 如果想知道域名的话 可以自己上传一个文件查看一下

 

 

Vue+ElementUI

这里是html代码

<template>
    <div class="AddUser">
        <el-form :model="userFrom" :rules="ruleGood" ref="userFrom" label-width="120px" class="demo-ruleForm">
            <el-form-item label="当前图片" :label-width="formLabelWidth" prop="name">
                <el-upload class="upload-demo" :action="fangwen" :file-list="imgadd" :on-success="handleChange"
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form>
    </div>
</template>

接下来是JS代码

<script>
export default {
    data() {
        return {
            //上传文件网址
            fangwen: "API控制器访问路径",
            imgadd: [],
            formLabelWidth: '120px',
        }
    },
    methods: {
        handleChange(file) {
            console.log(file)
            接收路径 = file.newFileName;
        },
    }
}
</script>

以上是Vue+ElementUI的代码

.Net Core WebApi

控制器代码 PS：控制器中的方法必须是post类型的

#region 文件流

        /// <summary>
        /// 文件上传
        /// </summary>
        /// <param name="file">图片路径</param>
        /// <returns></returns>
        [HttpPost]
        public IActionResult UpLoad(IFormFile file)
        {
            //获取文件名并赋值
            string? fname = _upoad.UpLoads(file);
            //返回数据
            return Ok(new
            {
                newFileName = "七牛云域名" + fname
            });
            
        }

        #endregion

接下来是封装后的方法 这里存放的是七牛云的密钥AK和SK

 /// <summary>
        /// 七牛云密钥AccessKey和SecretKey
        /// </summary>
        class Settings
        {
            public static string AccessKey { get; set; } = "AccessKey ";
            public static string SecretKey { get; set; } = "SecretKey ";
        }

AK和SK在七牛云个人中心的密钥管理中可以查看 复制粘贴即可

 接下来是将文件保存再本地后并重新生成文件名称 且继续上传至七牛云服务器

/// <summary>
        /// 上传云端
        /// 七牛云
        /// </summary>
        /// <param name="file">图片路径</param>
        /// <returns></returns>
        public string UpLoads(IFormFile file)
        {
            //这里是生成上传凭证的密钥
            Mac mac = new Mac(Settings.AccessKey, Settings.SecretKey);

            //七牛云空间名称
            string bucket = "空间名称";
            //重新生成文件名称
            string saveKey = DateTime.Now.ToString("yyyyMMddHHmmssffff") + Path.GetExtension(file.FileName);
            //分析绝对路径
            string rootdir = AppContext.BaseDirectory.Split(@"\bin\")[0];
            //生成上传到iis文件夹中的绝对路径
            var path = rootdir + @"/img/" + saveKey;
            //获取该文件的本地绝对路径 用于上传该文件
            string localFile = path;
            //清空文件流
            using (FileStream fs = File.Create(path))
            {
                file.CopyTo(fs);
                fs.Flush();
            }

            //实例化PutPolicy
            PutPolicy putPolicy = new();

            // 如果需要设置为"覆盖"上传(如果云端已有同名文件则覆盖)，请使用 SCOPE = "BUCKET:KEY"
            putPolicy.Scope = bucket;

            // 生成上传凭证                    
            string jstr = putPolicy.ToJsonString();
            string token = Auth.CreateUploadToken(mac, jstr);

            //UseHttps表示：是否采用https域名 UseCdnDomains表示：上传是否使用CDN上传加速 MaxRetryTimes表示：重试请求次数
            UploadManager um = new UploadManager(new Config() { Zone = Zone.ZONE_CN_South, UseHttps = false, UseCdnDomains = false, MaxRetryTimes = 3 });
            //进行上传七牛云
            HttpResult result = um.UploadFile(localFile, saveKey, token, new PutExtra());
            //返回生成后的文件名
            return saveKey;
        }

以上就是Vue+ElementUI+.Net上传文件的代码