vue+axios上传文件

vue+axios上传文件vue+axios上传文件

大家好,又见面了,我是你们的朋友全栈君。

单独上传文件:

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

methods: {
      update(e){
        let file = e.target.files[0];
        let param = new FormData(); //创建form对象
        param.append('file',file);//通过append向form对象添加数据
        console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        }; //添加请求头
        this.$http.post('http://127.0.0.1:8081/upload',param,config)
          .then(response=>{
            console.log(response.data);
          })
      }
    }


Form表单上传文件:

<form>
    <input type="text" value="" v-model="name" placeholder="请输入用户名">
    <input type="text" value="" v-model="age" placeholder="请输入年龄">
    <input type="file" @change="getFile($event)">
    <button @click="submitForm($event)">提交</button>
</form>
 data: {
          name: '',
          age: '',
          file: ''
        },
        methods: {
          getFile(event) {
            this.file = event.target.files[0];
            console.log(this.file);
          },
          submitForm(event) {
            event.preventDefault();
            let formData = new FormData();
            formData.append('name', this.name);
            formData.append('age', this.age);
            formData.append('file', this.file);
 
            let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
 
            this.$http.post('http://127.0.0.1:8081/upload', formData, config).then(function (response) {
              if (response.status === 200) {
                console.log(response.data);
              }
            })
          }
        }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/147880.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • BufferedWriter详解[通俗易懂]

    BufferedWriter详解[通俗易懂]字符缓冲流缓冲流:BufferedWriter高效读写支持输入换行符可以一次写一行,一次读一行。案例/**BufferedWriter*使用字符缓冲流写入文件**/publicclassTestBufferedWriter{publicstaticvoidmain(String[]args)throwsException{//1.创建一个缓冲流FileWriterfw=newFileWriter(

    2022年6月10日
  • 江诗丹顿geneve系列推荐大全_江诗丹顿geneve

    江诗丹顿geneve系列推荐大全_江诗丹顿geneve很多腕表印刻有众多的字母,比如“AUTOMATIC”英文,你知道这代表什么意思呢?这是自动机械表的标志,意味着腕表内部设计着上百个机械零件,也可带你感受机械运转的魅力。那么江诗丹顿geneve是什么意思呢?有什么与众不同的意义呢?学习可让你对腕表界有着更多的了解。江诗丹顿geneve是什么意思?有着什么意义呢?“geneve”,这是日内瓦的意思,也可引申为日内瓦印记,此印记有着百年历史,作用是对时…

    2022年10月23日
  • 大富豪3辅助器_加油站大亨作弊

    大富豪3辅助器_加油站大亨作弊   开心001最近新增加了一个功能:超级大亨,开始那几天没有外挂能进行操作,自己也很感兴趣,就动了编写一个外挂练习的念头。网上最早的一篇讲解开心网外挂的是http://www.turbozv.com/read.php/838.htm,写得很详细。   首先要分析下超级大亨的游戏赚钱手段:   1.每4小时登录本组件1次,将获得一定的资金奖励;   2.物品的市场价格会不断浮

    2022年9月3日
  • idea快捷键汇总mac_mac版本IDEA快捷键「建议收藏」

    idea快捷键汇总mac_mac版本IDEA快捷键「建议收藏」本文中的快捷键均为系统默认配置。一、mac系统键盘和符号对应关系1.Control(或Ctrl)⌃2.CapsLock⇪3.Command(或Cmd)⌘4.Option(或Alt)⌥5.Shift⇧二、mac系统自有快捷键1.command系列1).command+space切换输入法2).command+M最小化当前窗口3).command+Q关闭当前程序(…

    2022年5月25日
  • 使用LoadRunner进行并发测试、压力测试和负载测试

    使用LoadRunner进行并发测试、压力测试和负载测试版本为LoadRunner12.551.前期准备工作1.1录制脚本并实现参数化和参数关联1.2插入集合点函数lr_rendezvous(“**”);目的是为了让虚拟用户在这个集合点同时向服务器发送请求以实现并发测试2.开始测试2.1压力测试、负载测试和并发测试的区别分析压力测试:系统达到一定饱和度时,系统处理业务的能力负载测试:找到系统最大的负载能力(通过给系统不断的施压达到饱和状态不能加压为止)…

    2022年7月18日
  • 网线直接连接电脑可以上网,但通过无线路由器时却上不了网(转)

    网线直接连接电脑可以上网,但通过无线路由器时却上不了网(转)

    2021年9月7日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号