vue文件上传
今天写一个文件上传的功能,开始想用element-ui的组件写,但是发现不知道怎么把文件标题和内容一起上传,所以用了经典的input框上传。
废话不多说,直接上代码。
这是表单:
<el-form :model="fileForm" :rules="rules" ref="fileForm" label-width="80px">
<el-form-item label="标题" prop="title">
<el-input v-model="fileForm.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="内容" prop="msg">
<el-input type="textarea" v-model="fileForm.msg" placeholder="请输入信息"></el-input>
</el-form-item>
<el-form-item label="选择文件" prop="file">
<el-input type="file" v-model="fileForm.file"></el-input>
</el-form-item>
</el-form>
点击上传按钮提交请求:
var formData = new FormData()
var file = document.querySelector('input[type=file]').files[0]
formData.append('file', file)
formData.append('bucketname', 'bbfe')
formData.append('title', this.fileForm.title)
formData.append('msg', this.fileForm.msg)
this.$axios.post('/bbfe/s3/file', formData).then((res) => {
if (res.data.code === 1) {
this.$message.success('上传成功!')
this.$refs.fileTable.getFileList()
} else {
this.$message.error('上传失败!')
}
this.dialogVisible = false
}).catch((err) => {
console.log(err)
})
提交时是把formData传给后台,不是把 fileForm 提交。
vue文件上传的更多相关文章
- Spring Boot 2.x(十六):玩转vue文件上传
为什么使用Vue-Simple-Uploader 最近用到了Vue + Spring Boot来完成文件上传的操作,踩了一些坑,对比了一些Vue的组件,发现了一个很好用的组件--Vue-Simple- ...
- 测试开发实战[提测平台]17-Flask&Vue文件上传实现
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 先回顾下在此系列第8次分享给出的预期实现的产品原型和需求说明,如下图整体上和前两节实现很相似,只不过一般测试报告要写的内容可能比较多,就多 ...
- vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]
今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...
- vue文件上传控件
下载地址:https://pan.baidu.com/s/1Z3pFh2J3xWa8YYnLoseasg 使用方式: <upload ref='upload' action-url='' :mu ...
- .net code+vue 文件上传
后端技术 .net code 官方文档 https://docs.microsoft.com/zh-cn/aspnet/core/mvc/models/file-uploads?view=aspnet ...
- vue文件上传及压缩(canvas实现压缩)
// 读取文件结果 afterRead(files) { let that = this; let file = files.file; if (file === undefined) { retur ...
- Spring Boot + Vue 前后端分离,两种文件上传方式总结
在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 U ...
- 文件上传下载显示进度(vue)
编写了一个vue组件,可以实时显示文件上传和下载时候的进度 <template> <div v-show="circleProgress_wrapper_panel_sta ...
- JAVA SpringMVC + FormDate + Vue + file表单 ( 实现 js 单文件和多文件上传 )
JS 部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
随机推荐
- java————数组 简单写出一个管理系统
数组的特点 1, 数组是一块连续的空间,下标描述空间的位置. 2, 下标从0开始,最大下标为数组长度—1.(*.length-1) 3, 数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...
- PTA2
一.题目:7-1 币值转换 (20 分) 输入一个整数(位数不超过9位)代表一个人民币值(单位为元),请转换成财务要求的大写中文格式.如23108元,转换后变成“贰万叁仟壹百零捌”元.为了简化输出,用 ...
- 关于WeakEventManger的引用
在引用WeakEventManger时,代码里添加的命名空间是System.Windows,但项目引用的却是WindowsBase,真奇葩.
- bootstrap简单使用实例
表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...
- VUE踩坑之路
一.常见报错 1.vue-cli-service 不是内部或外部命令,也不是可运行程序 解决方案: 用以下命令安装Vue CLI就好 npm install -g @vue/cli # OR yarn ...
- Java BitSet解决海量数据去重
先提一个问题,怎么在40亿个整数中找到那个唯一重复的数字? 第一想法就是Set的不可重复性,依次把每个数字放入HashSet中,当放不去进去的时候说明这就是重复的数字,输出这个数字. if(hs.co ...
- [转载]使用QTP测试Windows对象
Desktop对象的使用: 通过Desktop对象,可以访问Windows的桌面顶层对象.Desktop对象包括CaptureBitmap.ChildObjects.RunAnalog方法. (1) ...
- .NET 使用 Azure Blob 存储图片或文件
使用的是VS2017 一.先使用 NuGet 获取这两个包. 执行以下步骤: 在“解决方案资源管理器”中,右键单击你的项目并选择“管理 NuGet 包”. 1.在线搜索“WindowsAzure.St ...
- 华为4K机顶盒EC6108V9U从原联通更换为电信的IPTV账号成功经验
4K设备直接在淘宝上买30块钱升级4K机顶盒,i视视手机app控制电视和手机投屏 硬件设备:EC6108V9U由X省联通更换为四川电信 采坑经验: 1.要从现有的机顶盒获取mac地址.stbid.ip ...
- EF提示“序列化类型为XXX的对象时检测到循环引用”
能看到这个标题 ,我就用解释原因,网上很多,我只给大家一个解决方案会: public <#=code.Escape(entity)#> ToPOCO() { return new < ...