基于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 classResponseFileInfo

    {/// <summary>
        ///默认构造函数/// </summary>
        publicResponseFileInfo() { }/// <summary>
        ///参数化构造函数/// </summary>
        /// <param name="id"></param>
        /// <param name="name"></param>
        /// <param name="url"></param>
        public ResponseFileInfo(string id, string name, stringurl) 

        {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-itemlabel="资料文档">
     <my-uploadv-model="viewForm.attachGUID":data="{ guid: viewForm.attachGUID, folder: '用户图片' }"disabled/>
 </el-form-item>

<scriptsetup 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);

      }returnresult;

    },

    ()=> false);

};