Upload 上傳 el-upload 上傳配置請求頭為Content-Type: "multipart/form-data"


api接口處添加屬性 (標紅處)

// 校驗台賬
export const checkEquiment = (data) => {
  return axios({
    url: '/job/equipmentInfo/checkEquipment',
    method: 'post',
    data,
    ContentType:'multipart/form-data'
  })
}

封裝axios中調用接口中配置的屬性

// 二次封裝axios模塊,包含攔截器等信息
import Axios from 'axios'
import config from './config'
import router from '@/router'
import { MessageBox, Message, Loading } from 'element-ui'
import qs from 'qs'

export default function $axios(options) {
  return new Promise((resolve, reject) => {
    // 創建一個axios實例
    // let responseType = 'json'
    if (options.responseType) {
      config.responseType = options.responseType
    }
//請求頭Axios.create創建之前做判斷,拿到接口中配置的屬性,設置請求頭為config.headers={
'Content-Type': options.ContentType}
 console.log(options.ContentType) if(options.ContentType){
      config.headers = {
         'Content-Type': options.ContentType } }
    const axios = Axios.create({
      baseURL: config.baseUrl,
      headers: config.headers,
      timeout: config.timeout,
      withCredentials: config.withCredentials
    })

    // 定義請求次數(用於判斷請求是否已經全部響應)
    let requestCount = 0
    let loading
    // (客戶端請求前)顯示loading
    function showLoading() {
      if (requestCount === 0) {
        loading = Loading.service({
          lock: true,
          text: '拼命加載中...'
          // spinner: 'el-icon-loading', // loading樣式類名
          // background: 'rgba(0,0,0,0.5)',
          // customClass: 'create-isLoading'
        })
      }
      requestCount++
    }
    let timer
    // (服務器響應后)嘗試隱藏loading
    function tryHideLoading() {
      requestCount--
      // 采用setTimeout是為了解決一個請求結束后緊接着有另一請求發起導致loading閃爍的問題
      timer = setTimeout(() => {
        if (requestCount === 0) {
          loading.close()
          clearTimeout(timer)
        }
      })
    }

    // 請求攔截器
    axios.interceptors.request.use(
      config => {
        // 在請求頭里添加系統編碼
        config.headers.systemCode = '01'
        // 解決get請求傳遞數組參數的問題
        if (config.method === 'get') {
          config.paramsSerializer = function(params) {
            return qs.stringify(params, {
              arrayFormat: 'repeat'
            })
          }
        }
        // console.log(options.loading)
        if (options.loading != false) {
          showLoading()
        }

        //
        return config
      },
      error => {
        loading.close()
        // 請求發生錯誤時
        console.log('request:', error)
        // 判斷請求超時
        if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
          console.log('timeout請求超時')
        }
        // 需要重定向到錯誤頁面
        const errorInfo = error.response
        if (errorInfo) {
          error = errorInfo.data // 頁面那邊catch的時候就能拿到詳細的錯誤信息,看最下邊的Promise.reject
          const errorStatus = errorInfo.status // 404 403 500 ...
          router.push({
            path: `/error/${errorStatus}`
          })
        }
        return reject(error) // 在調用的那邊可以拿到(catch)你想返回的錯誤信息
      }
    )
    // response 響應攔截器
    axios.interceptors.response.use(res => {
      tryHideLoading()
      if (res.data.code === 10002) {
        MessageBox.alert('登陸信息超時,請重新登陸!', '登陸超時', {
          confirmButtonText: '跳轉到登陸頁面',
          callback: () => {
            // 確定跳轉到登陸頁面后,清除用戶的登陸信息
            sessionStorage.removeItem('userInfo')
            window.location.href = '/'
          }
        })
      } else {
        return res.data
      }
    },
    err => {
      loading.close()
      if (err && err.response) {
        switch (err.response.status) {
          case 400:
            err.message = '請求錯誤'
            break
          case 401:
            err.message = '未授權,請登錄'
            break
          case 403:
            err.message = '拒絕訪問'
            break
          case 404:
            err.message = `請求地址出錯: ${err.response.config.url}`
            break
          case 408:
            err.message = '請求超時'
            break
          case 500:
            err.message = '服務器內部錯誤'
            break
          case 501:
            err.message = '服務未實現'
            break
          case 502:
            err.message = '網關錯誤'
            break
          case 503:
            err.message = '服務不可用'
            break
          case 504:
            err.message = '網關超時'
            break
          case 505:
            err.message = 'HTTP版本不受支持'
            break
          default:
        }
      }
      console.error(err)
      return reject(err) // 返回接口返回的錯誤信息
    }
    )
    // 請求處理
    axios(options).then(res => {
      resolve(res)
      return false
    }).catch(error => {
      reject(error)
    })
  })
}

此時再調此接口時


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM