大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
项目场景：
通过vue上传文件基本操作
问题描述：
使用html上传文件时，很容易理解，那么vue文件上传呢？我们学了vue不可能还往里面写原生html的内容吧！
先放代码再解释：
<template>
<div>
<el-form :model="form">
<el-upload action="url" :auto-upload="false" :on-change="onchanger" :file-list="fileList" >
<el-button size="small" plain>选择文件</el-button>
</el-upload>
<el-button size="small" @click="upload" >上传文件</el-button>
</el-form>
</div>
</template>
<script> export default {
data(){
return{
name: "PageThree", form:{
file:'' }, fileList:[] } }, methods: {
onchanger(file,fileList){
console.log(file.raw) console.log(fileList) this.form.file=file.raw }, upload(){
//单个文件上传 // let formData = new FormData() // formData.append('file', this.form.file) axios({
// url //method: post //post不限制大小 // params:formData, // Content-Type: "multipart/form-data" // ) }) alert(this.form.file) } } } </script>
<style scoped> </style>
细节：
图示为单文件上传，可将form改为fileList实现多文件上传，这是通过axios异步上传，若是想直接上传可将内容为上传文件那个button
<el-button size="small" type="primary" >上传文件</el-button>
//相当于Html中的submit
若是不理解某一部分，请留言。这是我参阅一大堆cv的博客后并实验得出来的，结论如下：
使用vue上传文件：
El-form组件：相当于html中的form标签：{属性:model=’form’双向绑定}
El-upload组件：文件上传组件，html表单中的input type=file>，
属性{ref=”注册引用信息”
Action=”url” //上传的url
:limit=”限制个数”
:auto-upload=”false”//是否选择后自动上传
Accept=”*”//可选择的文件格式，若为.doc也就只能上传doc文件
：before-upload=”文件上传前的钩子函数”
:on-change=”文件改变时的钩子函数”
:on-exceed=”exceedFile”文件超出个数时的钩子函数
:on-success=”handleSuccess”文件上传成功的钩子函数
:on-error=”handleError”、、文件上传失败时的钩子函数
:file-list=”fileList” }
Ref属性的使用，当我们给某个组件添加ref属性后如ref=”demo”,
当我们在method使用该组件时，就可用$refs.demo使用该组件
如:<input type=”text” ref=”txt” >
<button @click=”change()”>
nethods{
Change(){
$refs.txt.value=’123’;
}
}
点击按钮后，对应的输入框的值就会发生变化。refs时容器中
所有注册过ref的集合;
其详细功能如下：
console.log(this.$refs.inp)//<input type="text" id="inp">
console.log(document.getElementById('inp'))//<input type="text" id="inp">
这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。
File-list//实现el-form的数据与data中的fileList动态绑定，
钩子函数：//就是在某条件成立时，会触发相应的函数（method）
El-button plain>选择文件组件
El-button type=“primary”上传按钮
组合起来就能用了
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/183450.html原文链接：https://javaforall.net
