Vue上传文件操作（没有CV,认真看）

全栈程序员站长

发布于 2022-11-18 07:16:00

71900

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

项目场景：

	通过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”上传按钮
组合起来就能用了