为了账号安全,请及时绑定邮箱和手机立即绑定

Vue文件上传,全网最详细!

标签:
Vue.js

    关于在vue中上传文件,详细内容如下:

 fileLoad() {

        //利用formdata表单对象转换

        //获取到选中的文件

       file = document.querySelector("#file").files[0]; //拿到选择的文件

        //创建formdata对象 将文件存储在formdata对象中

        var formdata = new FormData();

        formdata.append("file", file);

//由于我们传formdata数据会占用整个传参对象,详情请看下面axios传参方式

//但是有时候需求还需要传其他的参数怎么办呢,我们可以将其他参数继续append进formdata对象中

//例如我们额外传一个参数test,值为测试

formdata.append('test','测试')

//这样我们formdata对象中就有两个字段 一个字段file 值对应的是文件对象,一个字段test 值对应的是测试

//只要formdata传送给后端,那么文件对象和测试 这两个值都会一起携带过去传给后端,后端会有中间件或者插件,解析formdata对象中的file文件对象将其单独拿出来,其他字段也可以单独提炼出来

//其实你可以想象formdata就是一个普通存放数据的对象{file:文件对象,test:'测试'}里面有一个属性对应文件对象,一个属性对应测试。然后将这个对象传给后端。后端负责从这个对象识别文件对象并获取。当然真实formdata并不是这种结构这里只是方便理解。因为我们传文件不能使用普通的对象传过去,只能将其放在formdata对象中传过去。

        const config = {

          headers: { "Content-Type": "multipart/form-data" }, //跟后端约定发送的数据类型为form-data对象类型

        };

        //调用接口上传文件

         axios({

          url:'http://localhost:3030/api/reg',

          method:'post',

          data:formdata, //我们传formdata会占用整个传参对象

          headers:config.headers 

        }).then(res=>{

          console.log(res)

        })

      },


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消