vue3中element-plus Upload上传文件代码示例

 更新时间:2023年08月18日 09:02:29   作者:拿铁喝布丁  
这篇文章主要介绍了vue3中element-plus Upload上传文件的相关资料,在时间开发中上传文件是经常遇到的一个需求,文中通过代码介绍的非常详细,需要的朋友可以参考下

先上效果图:

上传后:

 页面:

<el-upload :file-list="fileList" class="upload-demo" action="接口"
multiple v-model="ruleForms.upload" accept=".pdf" :before-upload="changeFiles"
 :on-change="handleChanges">
     <el-button type="primary">选择文件</el-button>
          <template #tip>
             <div class="el-upload__tip">
                  仅允许上传一个文件,仅限pdf格式
             </div>
           </template>
</el-upload>

我这里做个限制,仅限上传一个pdf文件,如果不需要可以去掉,更多api请参考官方upload上传官方文档

js部分:

const fileList = ref<UploadUserFile[]>([]);
const handleChange = (file, fileList) => {
    console.log(file, fileList);
    ruleForm.upload = fileList
    //限制文件数量,此处设置限制1条
    if (fileList.length > 1) {
        fileList.splice(0, 1);
    }
};
const changeFile = (file, fileList) => {
    console.log('file', file, fileList);
    if (file.type !== 'application/pdf') {
        ElMessage.error('只能上传pdf格式的文件');//限制文件类型
        return false;
    } else {
        let param = new FormData();
        param.append('file', file);
        console.log(param);
        axios({
            method: 'POST',
            url: '上传接口',
            data: param
        }).then((response) => {
            console.log(response); //查看接口返回的数据
        }, function (response) {
            console.log("错误信息:" + response)
        });
    }
};

完结,撒花~

总结

到此这篇关于vue3中element-plus Upload上传文件的文章就介绍到这了,更多相关vue3 element-plus Upload上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于element-ui中el-select下拉框选项过多的优化方案

    基于element-ui中el-select下拉框选项过多的优化方案

    这篇文章主要介绍了基于element-ui中el-select下拉框选项过多的优化方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 使用vue项目配置多个代理的注意点

    使用vue项目配置多个代理的注意点

    这篇文章主要介绍了使用vue项目配置多个代理的注意点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07
  • vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

    vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

    父子组件通信,都是单项的,很多时候需要双向通信。这篇文章主要介绍了vue 自定义组件 v-model双向绑定、 父子组件同步通信,需要的朋友可以参考下
    2017-11-11
  • Vue2 Dialog弹窗函数式调用实践示例

    Vue2 Dialog弹窗函数式调用实践示例

    这篇文章主要为大家介绍了Vue2 Dialog弹窗函数式调用实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 详解Vue.js 响应接口

    详解Vue.js 响应接口

    这篇文章主要介绍了Vue.js 响应接口的相关资料,文中实例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 解决vue无法设置滚动位置的问题

    解决vue无法设置滚动位置的问题

    这篇文章主要介绍了解决vue无法设置滚动位置的问题 ,需要的朋友可以参考下
    2018-10-10
  • Vue.JS入门教程之列表渲染

    Vue.JS入门教程之列表渲染

    这篇文章主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vite(vue3)配置内网ip访问的方法步骤

    vite(vue3)配置内网ip访问的方法步骤

    Vite是一个快速的构建工具,Vue3是一个流行的JavaScript框架,下面这篇文章主要给大家介绍了关于vite(vue3)配置内网ip访问的方法步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 详解vue 兼容IE报错解决方案

    详解vue 兼容IE报错解决方案

    这篇文章主要介绍了详解vue 兼容IE报错解决方案,详细的介绍了几种原因及其解决方案,非常具有实用价值,需要的朋友可以参考下
    2018-12-12
  • Vue异步加载about组件

    Vue异步加载about组件

    这篇文章主要为大家详细介绍了Vue异步加载about组件的相关方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论