项目场景：

 通过vue上传文件基本操作

问题描述：

使用html上传文件时，很容易理解，那么vue文件上传呢？我们学了vue不可能还往里面写原生html的内容吧！

先放代码再解释：

<template><div>
<el-form :model="form"><el-uploadaction="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”上传按钮
组合起来就能用了

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

Vue上传文件 iview Upload UI 组件上传组件
Vue上传文件 input支持上传文件定义type类型,隐藏样式第三定义change事件拿到file 的相关信息,accept限制支持的文件类型然后给button增加点击事件 template部 ...
vue 上传文件和下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码: html: <input type ...
vue 上传文件和下载文件
vue 上传文件和下载文件 1. 上传文件 2. 下载文件 1. 上传文件上传文件我所使用的组件是element ui 的 el-upload,我一共进行了如下两步,第一步:修改样式,因为el-up ...
vue 上传文件_前后端分离项目，如何优雅实现文件存储！
在上一节中我们讲到了使用MinIO来自建对象存储服务,这次我们来讲下MinIO如何结合SpringBoot和Vue来实现文件存储. 学前准备学习本文需要一些MinIO的基础知识,还不了解的小伙伴可以 ...
SpringBoot+Vue上传文件
最近在研究SpringBoot+Vue的文件上传,踩了不少坑.现在将正确的文件上传流程分享一下. 一.前端采用ElementUI组件前端页面完整代码: <template><el- ...
vue 上传文件到华为云obs
有两种方式, 第一种是在前端直接上传文件到obs, 第二种是先把文件上传到后台, 然后后台再调用obs对应开发语言的SDK 1. 前端直接上传文件到obs,不经过后端 1.1 使用npm引入包 // ...
Selenium+java - 借助autolt完成上传文件操作
写在前面: 上传文件是每个自动化测试同学会遇到,而且可以说是面试必考的问题,标准控件我们一般用sendkeys()就能完成上传,但是我们的测试网站的上传控件一般为自己封装的,用传统的上传已经不好用了, ...
vue上传文件到php,vue+axios+php如何实现上传文件功能？,formdata上传文件附加参数...
vue+axios+php如何实现上传文件功能?Vue Axios PHP如何实现上传文件的功能?, 推荐:<PHP视频教程> 当我们提交表单时,我们经常会遇到一些表单提交要求.vue的a ...
vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...

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

项目场景：

问题描述：

先放代码再解释：

细节：

若是不理解某一部分，请留言。这是我参阅一大堆cv的博客后并实验得出来的，结论如下：

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

最新文章

热门文章