基於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} 上傳出錯`);
      }
    }
  }
};

<el-form-item label="資料檔案">
     <my-upload v-model="viewForm.attachGUID" :data="{ guid: viewForm.attachGUID, folder: '使用者圖片' }"   disabled />
 </el-form-item>