[JavaScript知识库]vue文件上传

util/upload.js

import axios from 'axios';
import api from "@/http/api";
import { Message } from 'element-ui';

export const uploadFile = (file) => {
  let formData = new FormData();
  formData.append('file', file);
  return axios({
    url: process.env.VUE_APP_API_URL + api.importcode,
    method: 'POST',
    data: formData,
    timeout: 30000, //无超时
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    withCredentials: true
  }).then(res => {
    if(res.data.code === '000000') {
      Message.success(`已上传,成功:${res.data.data.correct}个,失败:${res.data.data.error}个`);
    } else {
      Message.success('上传失败请重试');
    }
  }).catch(err => {
    Message.success(JSON.stringify(err));
  })
}

在vue中使用

import { uploadFile } from "@/utils/upload";

<el-button type="primary" class="input-file-btn" style="float:left">
          <input
            type="file"
            name=""
            id=""
            ref="inputFile"
            @input="importpointsConfig"
             class="input-file"
          />导入模板
        </el-button>


async importpointsConfig(e) {
     await uploadFile(e.target.files[0]);
     this.$refs.inputFile.value = null;
    },