[JavaScript知识库]axios上传文件

1、request.js

import axios from 'axios'
// eslint-disable-next-line no-unused-vars
import { Message } from 'element-ui'
// import store from '@/store'
// create an axios instance
let base = ''
// 判断环境变量
if (process.env.NODE_ENV === 'production') {
  base = ''
} else {
  base = '/api'
}
const service = axios.create({
  baseURL: base // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  // timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    // if (store.getters.token) {
    // let each request carry token
    // ['X-Token'] is a custom headers key
    // please modify it according to the actual situation
    // config.headers['X-Token'] = getToken()
    // }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

2、api文件夹下的home.js

// 引入request.js
import request from '@/utils/request'
const api = {
  remove: '/remove',
  exportModel: '/exportModel',
  upLoadExcel: '/upLoadExcel'
}

// 删除
export function batchRemoveExecute(param) {
  return request({
    url: api.remove,
    method: 'delete',
    params: param,
  })
}
// 导出/下载
export function exportModel(param) {
  return request({
    url: api.exportModel,
    method: 'post',
    // params: param
    data: param,
    responseType: 'blob',
  })
}
// 上传/导入 Excel
export function upLoadExcel(param) {
  return request({
    url: api.upLoadExcel,
    method: 'post',
    // params: param
    data: param,
    headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' },
  })
}

3、vue文件

<template>
  <div id="home">
    <div class="content">
      <el-upload
        slot="append"
        action="#"
        :auto-upload="false"
        :show-file-list="false"
        accept="application/msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :on-change="upLoadExcel"
      >
        <el-button size="medium">
          <i class="iconfont iconexcel"></i> Excel导入
        </el-button>
      </el-upload>
    </div>
  </div>
</template>

<script>
import * as api from '../../api/home'
export default {
  name: 'home',
  components: {},
  data() {
    return {};
  },
  created() {},
  watch: {},
  mounted() {},
  methods: {
    // Excel导入
    upLoadExcel(file, fileList) {
      // 文件上传前做一下判断
      // const type_ALLOWD = ['doc', 'docx', 'txt', 'xls', 'xlsx', 'text', 'pdf']
      const type_ALLOWD = ['xls', 'xlsx']
      const fileType = file.raw.name.substring(
        file.raw.name.lastIndexOf('.') + 1
      )
      // 判断文件格式
      if (type_ALLOWD.indexOf(fileType) === -1) {
        this.$message({
          showClose: true,
          message: "只能上传以'.xls'、 '.xlsx'结尾的文件,请重新上传！",
          type: 'error',
          showClose: true
        });
      } else {
        let formData = new FormData()
        formData.append('file', file.raw)
        api.upLoadExcel(formData).then((res) => {
          let data = res.toString()
          if (data === '0') {
            this.$message({
              showClose: true,
              message: '导入成功！',
              type: 'success',
              showClose: true
            });
          } else {
            // 导入失败
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped></style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖