1. 程式人生 > 實用技巧 >Upload 上傳 el-upload 上傳配置請求頭為Content-Type: "multipart/form-data"

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) }) }) }

此時再調此介面時