vue formdata上传图片,vue form表单上传文件

　　本文主要介绍Vue使用formData格式类型上传文件的示例代码。代码简单易懂，对大家的学习或工作都有一定的参考价值。有需要的朋友可以参考一下。

　　在vue中，我们一般将前端和后端分开，即需要使用axios等工具向后台发送请求来操作数据。

　　其中，文件上传是难度较大的一项。本文教你五分钟上传文件。

　　1.如果图片上传，后端需要前端传输formData类型的数据。

　　El-button type= primary @ Click= upload file 2()单击上传/el-button

　　 input type= file @ change= filevaluechange 2() ref= uploadfile 2 enctype= multipart/form-data style= display:none；accept=image/jpeg，image/png，image/gif

　　我们使用本地输入来实现它。

　　上传文件2(){

　　//单击按钮按钮时会触发此事件

　　//功能是打开文件上传框。

　　这个。$refs.uploadFile2.click()

　　},

　　fileValueChange2(){

　　//文件被选中后，会触发input的change事件，进入这个函数。

　　var formData=新表单数据()

　　//这个。$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)。然后(res={

　　console . log(‘简单吗？老铁’)

　　})

　　},

　　差点忘了一步。axios要求二次封装，我就不多说了。这里我只展示接口。

　　导出常量消息通知=数据={

　　退货请求({

　　URL:“/t消息通知/上传”，

　　方法： POST ，

　　数据，

　　头：{ Content-Type : application/JSON }，

　　})

　　}

　　这就是这篇关于Vue使用formData格式类型上传文件的文章。关于Vue上传文件的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。