基于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
  );
};