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 ( 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字符类请求时，

1. 非文件上传时，无关你发送的数据格式是application/x-www-form-urlencoded或者application/json格式数据，你不设置请求头，fetch会给你默认加上一个Content-type = text/xml类型的请求头，有些第三方JAX可以自己识别发送的数据，并自己转换，但feth绝对不会，不行，你可以试一下；

2. 文件上传请求时，因为不知道那个boundary的定义方式，所以就如建议的一样，我们不设置Content-type。