vue2 elementui上传组件自动替换上一个文件,el-upload覆盖前一个文件

问题:vue2的elementui组件el-upload没有说明如何在限制只能上传一个文件的情况下,再次上传覆盖原文件(其实vue3对应的elementui已经有说明了,我借鉴了一下,写出来,想看Element Plus的上传覆盖原理的请点击链接: link
废话少说上代码!亲测有效

<el-upload
                                                class="upload-demo"
                                                ref="upload"
                                                :limit="1"
                                                accept=".jpg, .png, .jpge"
                                                :on-remove="handleFileRemove"
                                                :on-exceed="handleExceed"
                                                :action="uploadFileUrl"
                                                :on-success="uploadSuccessApply"
                                                :on-error="uploadErrorApply"
                                                :file-list="fileList"
                                                :headers="headers">
                                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                            </el-upload>
// 限制上传数量
        handleExceed(files, fileList) {//files指的是你刚上传的文件,fileList指的是你上传之前的文件数组
            this.$set(fileList[0], 'raw', files[0]);//raw就是指文件
            this.$set(fileList[0], 'name', files[0].name);//name就是指文件名
            this.$refs.upload.clearFiles();//删除所有上传的文件
            this.$refs.upload.handleStart(files[0]);//handleStart()指的是手动选择文件,Element Plus 的el-upload有说明
            this.$refs.upload.submit();//手动上传
        },

喜欢的点赞、收藏、加关注!!!
有问题的评论区提问。谢谢!!!

WebUploader是一个强大的文件上传组件,结合Vue.js,我们可以构建一个支持用户选择本地多文件并通过`el-dialog`弹窗进行上传的简单示例。首先,你需要安装Vue及依赖库: 1. 安装Vue CLI: ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目: ```bash vue create my-project cd my-project ``` 然后在项目中安装WebUploader和Element UI: ``` npm install vue-quill-editor webuploader element-ui --save ``` 接着,在`src/components`目录下创建一个名为`UploadDialog.vue`的文件,并添加以下内容: ```html <template> <div> <el-dialog title="上传文件" :visible.sync="dialogVisible" width="80%" center > <el-button slot="footer" @click="openFileDialog">选择文件</el-button> <webuploader ref="uploader" action="" :file-list="fileList" :on-success="handleSuccess" :before-upload="beforeUpload" ></webuploader> </el-dialog> </div> </template> <script> import WebUploader from 'webuploader' import { ElButton } from 'element-ui' export default { components: { ElButton, }, data() { return { dialogVisible: false, fileList: [], } }, methods: { openFileDialog() { this.$refs.uploader.chooseFiles() this.dialogVisible = true }, handleSuccess(res, file) { console.log('文件上传成功', res) // 这里可以将文件信息保存到服务器或处理列表 // 更新fileList 或者清空文件列表准备继续上传 }, beforeUpload(file) { // 可能需要的文件大小、格式检查 if (file.size > 10 * 1024 * 1024) { // 10MB限制 alert('文件过大,请选择小于10MB的文件') return false } return true }, }, } </script> ``` 注意: - `action` 属性应该替换为你实际的文件上传URL。 - `beforeUpload` 钩子用于处理文件上传的逻辑,例如大小验证。 - `handleSuccess` 钩子负责处理上传成功的回调,你可以在这里做进一步的数据处理。 最后别忘了在你的主入口文件`main.js`中引入并使用Element UI: ```javascript import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) new Vue({ render: h => h(App), }).$mount('#app') ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值