el-upload of Element-Plus in Vue3 clears uploaded files (simple and clear)

Core Technology:

//取消上传,清空上传文件
 function  doClear () {
   uploadrefss.value.clearFiles()
}

summary

<template>
<div>
    <el-button type="primary" disabled @click="doClear">清空上传文件</el-button>
</div>
<div>
  <el-upload
    class="upload-demo"
    drag
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    multiple
   ref="uploadrefss"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</div>
</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'

//取消上传,清空上传文件
 function  doClear () {
   uploadrefss.value.clearFiles()
}

</script>

Obtain article traffic, recommend exposure, just talk nonsense


What vue3.0 brings
1. Performance improvement,
package size reduced by 41%,
initial rendering is 55% faster, updated rendering block is 133%,
memory is reduced by 54%
......
2. Source code upgrade
uses Proxy instead of defineProperty to achieve Responsive
Rewrite the implementation of virtual DOM and Tree-Sharking
......
3. Embrace TypeScript
vue3.0 to better support TypeScript
4. The new feature
Composition API (combination api)

. setup configuration

. ref and reactive

。watch与watchEffect

. provide and inject

。 .......

new built-ins

。 Fragment

。Teleport

。Suspense

other changes

. new lifecycle hook

. The data option should always be declared as a function

. Remove keyCode support as v-on modifier
 

Guess you like

Origin blog.csdn.net/QQ675396947/article/details/126642239