html multipart/form-data,【Web前端问题】请求的contentType需要multipart/form-data，怎么转换？...

请求时根据控制台来看，contentType是text/plain，而我需要multipart/form-data类型

请问怎么转换呢？

html：

*ID：

保存

js：

$scope.processForm = function(){

var data = $scope.data,

url = Api.add,

config;

$http({

method: 'POST',

url: url,

data: data,

headers: {'Content-Type': undefined},

}).then(function(result){

.directive("fileread", [function () {

return {

scope: {

fileread: "="

},

link: function (scope, element, attributes) {

element.bind("change", function (changeEvent) {

var reader = new FileReader();

reader.onload = function (loadEvent) {

scope.$apply(function () {

scope.fileread = loadEvent.target.result;

});

}

reader.readAsDataURL(changeEvent.target.files[0]);

});

}

}

}]);

回答：

html

*ID：

保存

弃用了题目里的directive，改用链接里的angular-file-model

(function () {

'use strict';

angular.module('file-model', [])

.directive('fileModel', [

'$parse',

function ($parse) {

return {

restrict: 'A',

link: function(scope, element, attrs) {

var model = $parse(attrs.fileModel);

var modelSetter = model.assign;

element.bind('change', function(){

scope.$apply(function(){

if (attrs.multiple) {

modelSetter(scope, element[0].files);

}

else {

modelSetter(scope, element[0].files[0]);

}

});

});

}

};

}

]);

})();

保存的方法：

$scope.save = function(){

var data = new FormData(),

file = document.querySelector('input[type=file]').files[0],

url = Api.add,

config;

data.append('preview', file);

data.append('id', $scope.data.id);

$http({

method: 'POST',

url: url,

data: data,

headers: {'Content-Type': undefined},

transformRequest: angular.identity

}).then(function(result){

但是没看懂解决方法里的代码……感觉自己照抄来的也很粗糙……抛砖引玉……

评论里大佬说要用ajax只有通过FormData提交……原来是这个原因啊……头大

https://developer.mozilla.org…

回答：

$http({

method: 'POST',

url: url,

data: data,

headers: {'Content-Type': undefined},

}).then(function(result){

你把这个headers指定删掉，或者改为headers: {'Content-Type': 'multipart/form-data'}估计就行了

回答：

buildParam() {

var contentType = this.contentType;

// 上传文件表单等FormData格式

if (contentType === false) {

return this.params.body;

}

// 其他格式

if (contentType != 'application/json') {

return this.params;

}

//商控默认json格式

return JSON.stringify(this.params);

}

execute(onComplete, onError, context) {

var self = this;

onComplete = onComplete || $.noop;

onError = onError || $.noop;

context = context || this;

var opt = {

url: this.buildUrl(this.url),

type: this.type || 'POST',

dataType: this.datatype || 'json',

contentType: (function(context){

var contentType = self.contentType;

if (contentType === false) {

return contentType;

}

return contentType || 'application/json';

})(this),

processData: this.contentType === false ? false : true,

data: this.buildParam(),

timeout: this.timeout,

crossDomain: false,

success: function (res, status, xhr) {

if ((res && res.errNo == 0) && (xhr && xhr.status == 200)) {

onComplete.apply(context, arguments);

} else {

onError.apply(context, arguments);

}

},

error: function (err, status) {

onError.apply(context, arguments);

}

};

if (opt.url.indexOf(window.location.host) === -1 || opt.url.indexOf(window.location.protocol) === -1) {

opt.crossDomain = true;

}

// 设置token

const userInfo = Session.getInstance().getItem(CONSTANTS.SESSION_KEY_USERINFO);

if (userInfo && userInfo.token) {

if (opt.headers) {

opt.headers.Authorization = userInfo.token;

} else {

opt.headers = { Authorization: userInfo.token };

}

}

this.ajaxRequest = this.sendReq(opt);

}

sendReq(opt) {

return $.ajax(opt);

}

//REACT UNMOUNT大概需要

abort() {

if (this.ajaxRequest && this.ajaxRequest.abort) {

this.ajaxRequest.abort();

}

}

我自己项目里封装的 可以参考下 大概原理就是data传formdata类型contentType和processData传false 浏览器会自动识别

回答：

设置{'Content-Type': undefined}让浏览器自动识别content类型后，还需要覆盖$http的transformRequest默认预处理逻辑(默认的处理逻辑好像是转换为JSON format)，比如

$http({

...

transformRequest: angular.identity

...

})

试试吧，不一定好使