elementui el-upload 上传文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementui el-upload 上传文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

在使用element中的el-upload上传文件或者图片时，需要先把el-upload的自动上传改为手动上传:auto-upload=“false”然后el-upload内部会调用this.$refs.upload.submit();方法，从而实现多个文件上传。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Html

 <el-upload class="upload-demo" ref="uploadKpem" :http-request="onUploadKpem" action="" :on-preview="handlePreviewKpem"
                :on-remove="handleRemoveKpem" :file-list="fileListKpem" :auto-upload="false" accept=".pem" :limit="1">
                <el-button slot="trigger" type="primary">文件选择</el-button>
                <el-button style="margin-left: 10px" type="primary" plain @click="submitUploadKpem()">确认上传</el-button>
            </el-upload>

data(){
	return {
         fileListKpem: [],

	}
}

2.上传

代码如下（示例）：

//选择文件
 async onUploadKpem(file) {
 
            let formData = new FormData();
            formData.append("file", file.file);   //文件上传需要的参数 file 和 token
            formData.append("token", this.token);
            let upKpem = await UploadFileKpem(formData); //UploadFileKpem 自己封装的接口
            // console.log(upKpem,"上传")
            if(upKpem.code == 200){
               ....
            }else{
                ....
            }
            
        },
//点击上传
submitUploadKpem() {
            this.$refs.uploadKpem.submit();
        },

总结

需要注意的是
accept 设置了上传文件类型可自己更换
:limit=“1” 设置了上传最大个数为1
需要多文件上传时跟上面代码基本一致需要注意的是onUploadKpem方法里面可以使用map foreach等添加文件实现多文件上传文章来源地址https://www.toymoban.com/news/detail-735883.html

到了这里，关于elementui el-upload 上传文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！