el-upload

最新推荐文章于 2024-07-27 07:15:00 发布

soxiuzi

最新推荐文章于 2024-07-27 07:15:00 发布

阅读量155

点赞数 1

分类专栏： element-plus 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/soxiuzi/article/details/139743663

版权

element-plus 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

限制上传一个文件

使用el-upload的limit属性和on-exceed属性配合使用，v-model:file-list属性必须给一个变量来存放上传成功后的数据。

示例：

html部分：

<el-upload ref="upload" class="upload-demo" v-model:file-list="fileList" :show-file-list="false"
 action="接收文件的地址" :on-exceed="handleExceed" :limit="1"
   :on-success="handlePicSuccess">
   <template #trigger>
     <el-button type="primary">选择文件</el-button>
   </template>
 </el-upload>

js部分：

const fileList = ref([]);
const upload = ref(undefined); // upload实例ref
const handleExceed= (files: any) => {
  upload.value.clearFiles();
  nextTick(() => {
    upload.value!.handleStart(files[0]);
  });
};