vue axios实现文件上传

input元素type改为file类型， accept限制指定的文件类型，multiple可以多传送文件

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @getFile="update($event)"/>

FormData私有类对象，访问不到，可以通过get判断值是否传进去

import server from '@/services/server'
export default {
    data() {
      return {
        file: []
      }
    },
    name: 'SelectTheFile',
    methods: {
      getFile: function(event) {
        // 获取input里的文件
        this.file.push(event.target.files[0]);
        console.log(this.file);
      },
      submit: function(event) {
        event.preventDefault();
        // 创建form对象
        let formData = new FormData();
        // 通过append向form对象添加数据
        formData.append('file', this.file);
        server.uploadingFile(this.file).then(response => {
          console.log(response.data);
        })
      }
    }
  }

import axios from 'axios';
import baseUrl from '../config';

export default function(url, {
  method = 'post',
  timeout = 10000,
  data = {},
  headers = {'Content-Type': 'application/json;charset=UTF-8;'},
  dataType = 'json'
}) {
  const config = {
    method: method,
    timeout: timeout,
    url: url,
    baseURL: baseUrl.URL_CNODEJS,
    data: data,
    headers: headers,
    dataType: dataType
  };
  return axios(config);
}

import axios from '../services/axios';
const server = {
  uploadingFile(data) {
    return axios('/goupload', {
      method: 'post',
      data: data,
       // 修改请求头才能传文件
      headers: {'Content-Type': 'multipart/form-data'}
    })
  }
};

export default server;

改变input默认样式

    outline: none;
    background-color: transparent;
    filter: alpha(opacity=0);
    opacity: 0;