基于SqlSugar的开发框架循序渐进介绍(26)-- 实现本地上传/FTP上传/阿里云OSS上传三者合一处理

/// <summary> /// 文件上传处理的选项信息 /// </summary> public class UploadSettingOptions { /// <summary> /// 可指定的存储物理地址，如C:\\Attachment，如果没有配置项AttachmentBasePath，则默认一个相对目录。 /// </summary> public string AttachmentBasePath { get; set; } /// <summary> /// 指定附件上传的方式，如ftp为FTP方式，为空则为普通方式 /// </summary> public string AttachmentUploadType { get; set; } /// <summary> /// FTP上传配置 /// </summary> public FtpProviderOptions FtpProvider { get; set; } /// <summary> /// OSS存储的配置 /// </summary> public OSSProviderOptions OSSProvider { get; set; } }

/// <summary> /// OSS对象存储配置选项 /// </summary> public sealed class OSSProviderOptions { /// <summary> /// 指定提供商 /// </summary> public OSSProvider Provider { get; set; } /// <summary> /// 终结点 /// </summary> public string Endpoint { get; set; } public string AccessKey { get; set; } public string SecretKey { get; set; } public string Region { get; set; } public bool IsEnableHttps { get; set; } = true; public bool IsEnableCache { get; set; } public string Bucket { get; set; } }

OssClient client = new OssClient(endpoint, accessKeyId, accessKeySecret; client.PutObject(bucketName, key, filePathToUpload;

/// <summary> /// 上传文件（根据配置文件选择合适的上传方式） /// </summary> /// <param name="info">文件信息（包含流数据）</param> /// <returns></returns> public async Task<CommonResult> Upload(FileUploadInfo info { var uploadType = this._options.AttachmentUploadType; if (string.IsNullOrEmpty(uploadType { return await this.UploadByNormal(info; } else if (uploadType.Equals("ftp", StringComparison.OrdinalIgnoreCase { return await this.UploadByFTP(info; } else if(uploadType.Equals("oss", StringComparison.OrdinalIgnoreCase { return await this.UploadByOSS(info; } else { throw new ArgumentException("AttachmentUploadType配置指定了无效的值，请置空, 填写ftp或者填写oss。"; } }

/// <summary>
/// 使用阿里云的OSS服务上传文件
/// </summary>
/// <param name="info"></param>
/// <returns></returns>
public async Task<CommonResult> UploadByOSS(FileUploadInfo info
{
    var result = new CommonResult(;
    var ossOptions = this._options.OSSProvider;
    if(ossOptions != null
    {
        //上传获得的相对路径
        string category = info.Category;
        if (string.IsNullOrEmpty(category
        {
            category = "Photo";
        }

        //OSS的文件路径不能以正斜线（/）或者反斜线（\）字符开头。
        //确定日期时间目录（格式：yyyy-MM），不存在则创建
        string savePath = string.Format("{0}-{1:D2}/{2}", DateTime.Now.Year, DateTime.Now.Month, category;
        var ext = FileUtil.GetExtension(info.FileName;
        var finalName = string.Format("{0}{1}", Guid.NewGuid(.ToString(, ext;//FileUtil.GetFileName(file;

        var filePath = string.Concat(savePath, "/", finalName;
        var stream = FileUtil.BytesToStream(info.FileData;

        //使用阿里云的OSS服务上传文件
        var client = new OssClient(ossOptions.Endpoint, ossOptions.AccessKey, ossOptions.SecretKey;
        client.PutObject(ossOptions.Bucket, filePath, stream;

        //基础路径和部分路径
        info.BasePath = $"{(ossOptions.IsEnableHttps ? "https" : "http"}://{ossOptions.Bucket}.{ossOptions.Endpoint}";
        info.SavePath = filePath;
        info.AddTime = DateTime.Now;


        result.Success = await base.InsertAsync(info;
        if (result.Success
        {
            //记录返回值, Data1为具体的URL路径
            //生成外链地址 方便前端预览
            result.Data1 = info.BasePath.UriCombine(savePath;
            result.Data2 = savePath;
        }
        else
        {
            result.ErrorMessage = "数据写入数据库出错。";
        }
    }
    else
    {
        result.ErrorMessage = "OSS配置信息不正确或没有启用";
    }

    return result;
}

    <div class="wangeditor">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
    </div>

<script setup lang="ts"> import '@wangeditor/editor/dist/css/style.css'; // 引入 css import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; defineOptions({ name: 'Editor' }; const mode = 'default'; // 编辑器实例，必须用 shallowRef const editorRef = shallowRef(;

const editorConfig = { placeholder: '请输入内容...', MENU_CONF: { // 配置默认字号 // 配置上传图片 uploadImage: { // 上传图片请求接口路径 server: '/api/FileUpload/PostUpload', // 后端接收的文件名称 fieldName: 'multipartFile', maxFileSize: 10 * 1024 * 1024, // 上传图片10M // 上传的图片类型 allowedFileTypes: ['image/*'], // 自定义增加 http header headers: { Authorization: 'Bearer ' + getAccessToken( }, // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。 meta: { guid: '', folder: '文档图片' }, // 将 meta 拼接到 url 参数中，默认 false metaWithUrl: false, // 小于该值就插入 base64 格式（而不上传），默认为 0 base64LimitSize: 10 * 1024, // 10MB // 自定义上传图片返回格式【后端返回的格式】 customInsert(res: any, insertFn: InsertFnType { console.log(res; if (!res.success { ElMessage.error('上传文件失败，' + res.error; return; } // 从 res 中找到 url alt href，然后插入图片 ,根据后端实际返回的字段来 var result = res.result as Array<ResponseFileInfo>; if (result.length > 0 { console.log(result[0]; insertFn(result[0].url, result[0].name, result[0].url; } }, // 单个文件上传成功之后 onSuccess(file: File, res: any { if (res.success { ElMessage.success(`${file.name} 上传成功`; return; } else { ElMessage.warning(`${file.name} 上传出了点异常`; return; } }, // 单个文件上传失败 onFailed(file: File, res: any { console.log(res; ElMessage.error(`${file.name} 上传失败`; }, // 上传错误，或者触发 timeout 超时 onError(file: File, err: any, res: any { console.log(err, res; ElMessage.error(`${file.name} 上传出错`; } } } };