Vue使用formData格式类型上传文件的示例
程序员文章站
2022-06-25 09:34:46
在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作。其中,文件上传算是比较难的一种。这篇文章五分钟教会你上传文件。1.如图片上传,后端需要前端传formda...
在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作。
其中,文件上传算是比较难的一种。这篇文章五分钟教会你上传文件。
1.如图片上传,后端需要前端传formdata类型数据的情况下
<el-button type="primary" @click="uploadfile2()">点击上传</el-button> <input type="file" @change="filevaluechange2()" ref="uploadfile2" enctype="multipart/form-data" style="display:none;" accept="image/jpeg,image/png,image/gif">
我们使用原生input的方式来实现。
uploadfile2(){ // 当点击button按钮后会触发此事件 // 作用就是打开文件上传弹框 this.$refs.uploadfile2.click() }, filevaluechange2(){ // 选中文件后,会触发input的change事件,即会进入此函数 var formdata = new formdata() // this.$refs.uploadfile2是vue中获取dom元素的方法 // 通过files就可以拿到所有上传的文件,如果是多个文件循环即可 formdata.append( 'file',this.$refs.uploadfile2.files[0]) // 必须设置请求类型 formdata.append( 'type', "head"); // 如果需要传id的情况下,参考下面代码 formdata.append( 'id', this.id); // 配置完成后,只需要向后台传入formdata 变量即可 insertnavigationupload(formdata).then(res=>{ console.log('简单吗?老铁') }) },
差点忘记一步,axios请求二次封装我就不多说了,这里只展示下接口
export const tmessagenotification = data =>{ return request({ url:'/tmessagenotification/upload', method: 'post', data, headers: {'content-type': 'application/json'}, }) }
到此这篇关于vue使用formdata格式类型上传文件的文章就介绍到这了,更多相关vue上传文件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
推荐阅读
-
Java实现拖拽文件上传dropzone.js的简单使用示例代码
-
vue中实现图片和文件上传的示例代码
-
JavaScript使用Ajax上传文件的示例代码
-
vue + axios + formdata 上传文件带参数的爬坑之路
-
vue使用axios实现文件上传进度的实时更新详解
-
vue使用el-upload上传文件及Feign服务间传递文件的方法
-
在vue项目中使用element-ui的Upload上传组件的示例
-
【土旦】 使用Vant 的Uploader 上传图片 重定义返回格式 使用FormData格式提交
-
vue使用axios上传文件(FormData)的方法
-
vue +element的上传文件限制文件大小和限制文件类型