Vue 使用fetch实现上传功能

import Vue from 'vue';import { Message } from 'iView';/** ** @param {*} url* @param {*} data* @param {string} method*/function ajax(url, data, method) {var p = new Promise(function (resolv...

Corey_Mxd

3330人浏览 · 2018-06-06 15:31:38

Corey_Mxd · 2018-06-06 15:31:38 发布

 
  import 
  Vue 
  from 
  'vue'; 
 
  import { 
  Message } 
  from 
  'iView'; 
 
  /** 
 
   *  
 
   *  
  @param 
    
  {*} 
    
  url 
    
   *  
  @param 
    
  {*} 
    
  data 
    
   *  
  @param 
    
  {string} 
    
  method 
    
   */ 
 
  function 
  ajax( 
  url, 
  data, 
  method) { 
 
  var 
  p = 
  new 
  Promise( 
  function ( 
  resolve, 
  reject) { 
 
  let 
  formData = 
  new 
  FormData(); 
 
  for ( 
  var 
  key 
  in 
  data) { 
 
  formData. 
  append( 
  key, 
  data[ 
  key]); 
 
   } 
 
  var 
  options = { 
 
  method: 
  method, 
 
  headers: { 
 
  // "Content-Type": "multipart/form-data;charset=utf-8" 
 
   }, 
 
  credentials: 
  "include" 
 
   } 
 
  switch ( 
  method. 
  toUpperCase()) { 
 
  case 
  "GET": 
 
  case 
  "DELETE": { 
 
  url = 
  url + 
  "?" + 
  formData; 
 
  break; 
 
   } 
 
  case 
  "POST": 
 
  case 
  "PUT": { 
 
  options. 
  body = 
  formData; 
 
  break; 
 
   } 
 
  default: 
 
  break; 
 
   } 
 
  fetch( 
  url, 
  options). 
  then(( 
  res) 
  => { 
 
  try { 
 
  if (! 
  res. 
  ok) { 
 
  // 请求失败 
 
  res. 
  json(). 
  then(( 
  data) 
  => { 
 
  reject( 
  data. 
  Message); 
 
  // reject(data.$Message); 
 
   }) 
 
  return; 
 
   } 
 
  res. 
  text(). 
  then(( 
  data) 
  => { 
 
  var 
  pData = 
  JSON. 
  parse( 
  data); 
 
  if ( 
  pData. 
  Code === 
  0) { 
 
  resolve( 
  pData. 
  Data); 
 
   } 
  else { 
 
  reject( 
  data. 
  Message || 
  "请求失败"); 
 
  return; 
 
   } 
 
   }); 
 
   } 
  catch ( 
  e) { 
 
  reject( 
  "无法解析的返回值") 
 
   } 
 
   }). 
  catch(( 
  msg) 
  => { 
 
  reject( 
  msg); 
 
   }); 
 
   }); 
 
  p. 
  catch(( 
  msg) 
  => { 
 
  Message. 
  error( 
  msg); 
 
  // $Message.error(msg); 
 
   }); 
 
  return 
  p; 
 
   } 
 
  export 
  function 
  get( 
  url, 
  data) { 
 
  return 
  ajax( 
  url, 
  data, 
  "GET"); 
 
   } 
 
  export 
  function 
  post( 
  url, 
  data) { 
 
  return 
  ajax( 
  url, 
  data, 
  "POST"); 
 
   } 
 
  export 
  function 
  del( 
  url, 
  data) { 
 
  return 
  ajax( 
  url, 
  data, 
  "DELETE"); 
 
   } 
 
  export 
  function 
  put( 
  url, 
  data) { 
 
  return 
  ajax( 
  url, 
  data, 
  "PUT"); 
 
   }

处理返回数据格式为：

问题讨论：post请求Content-type到底该不该设置

我得出的结论是，要正确设置。fetch 发送post字符类请求时，

非文件上传时，无关你发送的数据格式是application/x-www-form-urlencoded或者application/json格式数据，你不设置请求头，fetch会给你默认加上一个Content-type = text/xml类型的请求头，有些第三方JAX可以自己识别发送的数据，并自己转换，但feth绝对不会，不行，你可以试一下；
文件上传请求时，因为不知道那个boundary的定义方式，所以就如建议的一样，我们不设置Content-type。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^