基於SqlSugar的開發框架循序漸進介紹（13）-- 基於ElementPlus的上傳元件進行封裝，便於專案使用

        /// <summary>
        /// 多檔案上傳處理（自動根據組態檔選擇合適的上傳方式）
        /// </summary>
        /// <param name="guid">附件組GUID</param>
        /// <param name="folder">指定的上傳目錄</param>
        /// <returns></returns>
        [RequestSizeLimit(100000000)] //請求正文最大大小100M
        [HttpPost]
        [Route("postupload")]
        public async Task<List<ResponseFileInfo>> PostUpload()

    /// <summary>
    /// 上傳後檔案返回的結果資訊
    /// </summary>
    public class ResponseFileInfo
    {
        /// <summary>
        /// 預設建構函式
        /// </summary>
        public ResponseFileInfo() { }

        /// <summary>
        /// 引數化建構函式
        /// </summary>
        /// <param name="id"></param>
        /// <param name="name"></param>
        /// <param name="url"></param>
        public ResponseFileInfo(string id, string name, string url) 
        {
            this.Id = id;
            this.Name = name;
            this.Url = url;
        }


        /// <summary>
        /// 記錄ID
        /// </summary>
        public string Id { get; set; }
        /// <summary>
        /// 檔名稱
        /// </summary>

        public string Name { get; set; }

        /// <summary>
        /// 檔案路徑
        /// </summary>
        public string Url { get; set; }
    }

        public async Task<List<ResponseFileInfo>> PostUpload()
        {
            var httpContext = this.HttpContext;
            string guid = httpContext.Request.Form["guid"];//input.guid;
            string folder = httpContext.Request.Form["folder"];//input.folder;
            var files = httpContext.Request.Form.Files;

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

<script setup lang="ts">
import { reactive,  ref,  onMounted,  watch,  computed, getCurrentInstance} from "vue";

import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadInstance, UploadProps, UploadUserFile } from "element-plus";
import { Plus, UploadFilled } from "@element-plus/icons-vue";
import { isNullOrUnDef, isEmpty } from "/@/utils/is";
import fileupload from "/@/api/fileupload";

defineOptions({ name: "MyUpload" });

//宣告Props的介面型別
interface Props {
  modelValue?: string; // 接受外部v-model傳入的值,記錄的AttachGUID值
  data?: Record<string, any>; //上傳時附帶的額外引數: {a:b}
  headers?: Headers | Record<string, any>; //設定上傳的請求頭部
  listType?: "text" | "picture" | "picture-card"; //檔案列表的型別

  disabled?: boolean; // 是否禁用
  multiple?: boolean; // 是否支援多選檔案
  limit?: number; // 最大允許上傳個數
  fileSize?: number; // 大小限制(MB)
  fileType?: Array<string>; // 檔案型別, 例如['png', 'jpg', 'jpeg']
  isShowTip?: boolean; // 是否顯示提示
  showFileList?: boolean; //是否顯示檔案列表
  withCredentials?: boolean; //支援傳送 cookie 憑證資訊
  isAvatarUpload?: boolean; // 是否是頭像上傳
  drag?: boolean; //是否啟用拖拽上傳
  buttonText?: string; //按鈕文字
}
//使用預設值定義Props
const props = withDefaults(defineProps<Props>(), {
  modelValue: "", //對應自定義元件的v-model的值
  data: () => {
    return null;
  },
  headers: () => {
    //用於上傳檔案的身份認證
    return { Authorization: "Bearer " + getAccessToken() };
  },
  listType: "text", //"text" | "picture" | "picture-card"

  disabled: false,
  multiple: false,
  // limit: 10,
  fileSize: 2, //MB
  fileType: () => {
    return ["png", "jpg", "jpeg", "gif"];
  },
  isShowTip: true,
  showFileList: true,
  withCredentials: true, //支援傳送 cookie 憑證資訊
  isAvatarUpload: false, //頭像上傳方式
  drag: false, //是否啟用拖拽上傳
  buttonText: "單擊上傳",

});
//定義觸發事件
const emit = defineEmits(["error", "success", "remove", "change"]);

//掛載的時候初始化資料
onMounted(async () => {
  if (!isEmpty(props.modelValue)) {
    // 使用字典型別，從伺服器請求資料
    await fileupload.GetByAttachGUID(props.modelValue).then(data => {
      // console.log(data);
      if (data.length > 0) {
        var list: Array<UploadUserFile> = [];
        data.map(item => {
          let url = getUrl(item);
          let { id, fileName, fileExtend } = item; // 結構物件屬性
          list.push({
            name: fileName,
            url: url,
            uid: id
          });
        });

        fileList.value = list;
        //如果是頭像上傳模式，顯示最後一個圖片
        if (props.isAvatarUpload) {
          avatarImageUrl.value = list[0]?.url;
        }
      }
    });
  }
});

//預覽檔案
const handlePreview: UploadProps["onPreview"] = uploadFile => {
  // console.log(uploadFile);
  // 當格式為圖片就預覽圖片，否則下載檔案
  let filename = uploadFile.name;
  let fileurl = uploadFile.url;
  let fileExtension = "";

  // 校檢檔案型別
  var imageTypes = ["png", "jpg", "jpeg", "gif"];
  if (filename.lastIndexOf(".") > -1) {
    fileExtension = filename.slice(filename.lastIndexOf(".") + 1);
  }
  const isTypeOk = imageTypes.some(type => {
    if (fileExtension && fileExtension.indexOf(type) > -1) return true;
    return false;
  });

  if (isTypeOk) {
    //預覽圖片
    dialogImageUrl.value = fileurl;
    dialogTitle.value = filename;
    dialogVisible.value = true;
  } else {
    //下載檔案
    dialogVisible.value = false;
    // openWindow(fileurl, { target: "_self" });
    window.open(fileurl, "_self");
  }
};

//移除檔案前操作
const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile);
  //${uploadFile.name}
  return ElMessageBox.confirm(`確認刪除該檔案嗎?`).then(
    async () => {
      var result = false;
      var id = uploadFile.uid;
      if (!isEmpty(id)) {
        result = await fileupload.Delete(id);
      }
      return result;
    },
    () => false
  );
};