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 ...
随机推荐
- 听说https更安全
0--介绍: 现在人们对网络的依赖越来越重,那么对于网络安全的要求也越来越高,传统的http协议实现了网络中的快速传输,完整传输,保证了信息的完整性,但是对于网络的安全性却没有那么强,很容易被人劫持, ...
- python leetcode 颠倒二进制数
我的做法,,这个题在于必须补0 def reverseBits(n): num=32-len(bin(n)[2:]) m = bin(n)[2:][::-1] if num > 0: for i ...
- centos7进单用户
当重启linux系统,进入系统选择页面的时候,按e 在linux16那一行最后面添加 init=/bin/sh 按ctrl+c 挂载根分区,可读写 mount / -o rw, remount
- Python3的List操作和方法
列表函数: len(list):列表元素个数 max(list):返回list中最大的元素 min(list):返回list中最小的元素 list(seq):将元组转换为列表 列表方法: list.a ...
- pymongo中的连接操作:Connection()与MongoClient()
class MongoClient(pymongo.common.BaseObject) Connection to MongoDB. Method resolution order: MongoCl ...
- oracle 的 exp 和imp命令
数据导出: 1 将数据库TEST完全导出,用户名gdoa 密码123 导出到D:\TEST_BK.dmp中 exp gdoa/123@TEST file=d:\TEST_BK.dmp full=y ...
- Go 变量声明后若不赋值,各类型默认值
Go 变量声明后若不赋值,各类型默认值(数字类型默认为 0,其他类型为 nil): 数据类型 默认值 bool false string 空字符串 int 0 float32 0 float64 0 ...
- ubuntu升级显卡驱动
2.驱动安装 参考:http://blog.csdn.net/Zafir_410/article/details/73188228 2.1 卸掉已安装的驱动 1 sudo apt-get purge ...
- MQTT研究之EMQ:【基础研究】
EMQ版本V2, emqttd-centos7-v2.3.11-1.el7.centos.x86_64.rpm 下载地址:http://emqtt.com/downloads/2318/centos7 ...
- Creating Excel files with Python and XlsxWriter(通过 Python和XlsxWriter来创建Excel文件(xlsx格式))
以下所有内容翻译至: https://xlsxwriter.readthedocs.io/ #----------------------------------------------------- ...