今天写一个文件上传的功能,开始想用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文件上传的更多相关文章

  1. Spring Boot 2.x(十六):玩转vue文件上传

    为什么使用Vue-Simple-Uploader 最近用到了Vue + Spring Boot来完成文件上传的操作,踩了一些坑,对比了一些Vue的组件,发现了一个很好用的组件--Vue-Simple- ...

  2. 测试开发实战[提测平台]17-Flask&Vue文件上传实现

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 先回顾下在此系列第8次分享给出的预期实现的产品原型和需求说明,如下图整体上和前两节实现很相似,只不过一般测试报告要写的内容可能比较多,就多 ...

  3. vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]

    今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...

  4. vue文件上传控件

    下载地址:https://pan.baidu.com/s/1Z3pFh2J3xWa8YYnLoseasg 使用方式: <upload ref='upload' action-url='' :mu ...

  5. .net code+vue 文件上传

    后端技术 .net code 官方文档 https://docs.microsoft.com/zh-cn/aspnet/core/mvc/models/file-uploads?view=aspnet ...

  6. vue文件上传及压缩(canvas实现压缩)

    // 读取文件结果 afterRead(files) { let that = this; let file = files.file; if (file === undefined) { retur ...

  7. Spring Boot + Vue 前后端分离,两种文件上传方式总结

    在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 U ...

  8. 文件上传下载显示进度(vue)

    编写了一个vue组件,可以实时显示文件上传和下载时候的进度 <template> <div v-show="circleProgress_wrapper_panel_sta ...

  9. JAVA SpringMVC + FormDate + Vue + file表单 ( 实现 js 单文件和多文件上传 )

    JS 部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

随机推荐

  1. Spring mvc后台重定向页面,实际前端不跳转

    1.ajax不支持重定向 ajax是不支持重定向的,因为ajax本身就是局部刷新,不重新加载页面的. 2.若后台出现需要重定向页面,可以设置唯一错误码 前端ajax公共调用后,凡是遇到这一类错误码,则 ...

  2. python3+qqBot+图灵机器人实现qq聊天机器人

    原理: 通过Python3的qqBot开源库,基于腾讯的smartQQ协议登录个人QQ,实现监控.收集QQ消息,进而通过图灵机器人API接入方式实现自动聊天. 零.前期准备: 1.Python3 2. ...

  3. 学习笔记TF058:人脸识别

    人脸识别,基于人脸部特征信息识别身份的生物识别技术.摄像机.摄像头采集人脸图像或视频流,自动检测.跟踪图像中人脸,做脸部相关技术处理,人脸检测.人脸关键点检测.人脸验证等.<麻省理工科技评论&g ...

  4. [工作积累] shadow map问题汇总

    1.基本问题和相关 Common Techniques to Improve Shadow Depth Maps: https://msdn.microsoft.com/en-us/library/w ...

  5. 巴黎游戏周: PS4独占游戏《重力少女2》

    http://blog.us.playstation.com/2015/10/27/gravity-rush-2-coming-to-north-america-on-ps4/

  6. 前端基础:canvas概述

    1:并不是所有的浏览器都支持canvas,若是不支持则浏览器会弹出 <canvas>Update your browser to enjoy canvas</canvas> 浏 ...

  7. Lunar Lander 月球冒险

    发售年份 1979 平台 街机 开发商 雅达利(Atari) 类型 飞行模拟 https://www.youtube.com/watch?v=McAhSoAEbhM

  8. zabbix3.4使用外部邮件报警

    打开web页面,找到 管理--报警媒介类型 打开 Email 填写外部邮箱信息 点击更新,这样发件人和邮箱服务器信息定义完成. 添加收件人信息: 接下来创建动作,配置---动作---选触发器 ok 过 ...

  9. STM32 USB-三个HID-interface 复合(组合)设备的代码实现-基于固件库(原创)

    一.概论: 在STM32_USB-FS-Device_Lib_V4.1.0的Custom_HID工程基础上进行修改: 开发一款设备,有三个HID接口,mouse+pen+自定义HID 其中:0_HID ...

  10. pycrypto安装出错的问题 intmax_t C:\Program Files (x86)\Windows Kits\10\include\10.0.10240.0\ucrt\inttypes.

    前言: 需要安装 Microsoft Visual Studio2017 Community 或者buildtools 解决方案一(解决了python3.7上安装pycrypto-2.6.1的错误问题 ...