• 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);
                  }
                })
              }
            }
  • 相关阅读:
    MySQLCluster架构图文详解
    Request.ServerVariables大全,写到这里方便查找
    如何修改表的标识列
    如何在存储过程中,调用另一存储过程的结果集
    自我简介
    第二个web网页
    第一个网页感想
    C语言I博客作业03
    ES基本搜索(1)
    ES的入门学习
  • 原文地址:https://www.cnblogs.com/ustc-anmin/p/10693165.html
Copyright © 2020-2023  润新知