在ASP.NET MVC 4.7.2项目中如何将图片上传至Cloudinary并保存访问URL

1. 前置准备 #

• 通过NuGet包管理器安装官方SDK CloudinaryDotNet
• 在Web.config的<appSettings>节点添加Cloudinary凭证配置，对应值从你的Cloudinary后台获取：

<appSettings>
  <add key="CloudinaryCloudName" value="你的CloudName" />
  <add key="CloudinaryApiKey" value="你的ApiKey" />
  <add key="CloudinaryApiSecret" value="你的ApiSecret" />
</appSettings>

2. 视图层表单改造 #

表单必须添加enctype="multipart/form-data"属性才能支持文件上传，示例Razor代码如下：

@using (Html.BeginForm("SubmitForm", "你的控制器名", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <!-- 你原有其他表单字段 -->
    <div>
        <label>上传图片：</label>
        <input type="file" name="UploadImage" accept="image/*" required />
    </div>
    <button type="submit">提交表单</button>
}

注意文件上传控件的name属性值后续要和控制器接收参数名保持一致。

3. 控制器层上传逻辑实现 #

在表单提交对应的Action中，接收上传文件并调用Cloudinary接口：

using CloudinaryDotNet;
using CloudinaryDotNet.Actions;
using System.Configuration;
using System.Web;
using System.Web.Mvc;

public class 你的控制器名Controller : Controller
{
    [HttpPost]
    public ActionResult SubmitForm(/* 你原有其他表单字段参数 */ HttpPostedFileBase UploadImage)
    {
        // 初始化Cloudinary客户端
        Account account = new Account(
            ConfigurationManager.AppSettings["CloudinaryCloudName"],
            ConfigurationManager.AppSettings["CloudinaryApiKey"],
            ConfigurationManager.AppSettings["CloudinaryApiSecret"]
        );
        Cloudinary cloudinary = new Cloudinary(account);

        string imageUrl = "";
        // 校验上传文件有效性
        if (UploadImage != null && UploadImage.ContentLength > 0)
        {
            ImageUploadParams uploadParams = new ImageUploadParams()
            {
                // 直接读取上传流，无需落地到服务器本地磁盘
                File = new FileDescription(UploadImage.FileName, UploadImage.InputStream)
            };
            ImageUploadResult uploadResult = cloudinary.Upload(uploadParams);
            
            // 校验上传结果
            if (uploadResult.StatusCode == System.Net.HttpStatusCode.OK)
            {
                // 拿到可直接使用的HTTPS格式图片URL
                imageUrl = uploadResult.SecureUrl.ToString();
            }
        }

        // 此处将imageUrl和其他表单字段一起写入你的数据库即可，和你原有存储逻辑一致
        // 你的数据库存储逻辑...

        return RedirectToAction("Success");
    }
}

可选优化项 #

• 可在前端/控制器新增文件大小、格式校验，避免无效请求
• 可在Cloudinary后台配置上传规则，自动压缩、裁切图片，适配业务需求
• 可将Cloudinary客户端的初始化逻辑封装为单例，避免每次请求重复实例化

内容的提问来源于stack exchange，提问作者Zain763