vue3实现 附件上传简单代码示例【自用】

vue3实现 附件上传简单代码示例

<el-form-item label="上传附件"prop="enclosure"><el-upload
            v-model:file-list="enclosureFileList"class="upload-demo"action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleEnclosureRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"><el-button type="primary">上 传</el-button><template #tip><div class="el-upload__tip">
                jpg/png/doc/jpeg/pdf, and files with a size less than 500KB.
              </div></template></el-upload></el-form-item>

<script>
// 附件
const enclosureFileList = ref<UploadUserFile[]>([{
    name: "element-plus-logo.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
  },
  {
    name: "element-plus-logo2.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
  },
]);

// 上传附件
const handleEnclosureRemove: UploadProps["onRemove"]=(file, uploadFiles)=>{
  console.log(file, uploadFiles);};

const handlePreview: UploadProps["onPreview"]=(uploadFile)=>{
  console.log(uploadFile);};

const handleExceed: UploadProps["onExceed"]=(files, uploadFiles)=>{
  ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`);};

const beforeRemove: UploadProps["beforeRemove"]=(uploadFile, uploadFiles)=>{return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(()=> true,
    ()=>false);};</script>