angular提交form表单实现文件上传时content-type不是multipart/form-data

初学前端,第一次用angular……问题可能会有点弱智……望解答

更新:
在stackoverflow找到一个解决方法
https://stackoverflow.com/que...
但是使用了之后content-type不是multipart/form-data

图片描述

根据stackoverflow加的js:

.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:

<form ng-submit="processForm()" enctype="multipart/form-data">
    <div class="form-group">
        <label class="label"><span class="tip" ng-hide="data.id">*</span>ID:</label>
        <input class="input" name="id" ng-model="data.id" maxlength="5">
    </div>
    <div class="form-group">
        <input type="file" name="preview" fileread="data.preview"><!--改动在这里-->
    </div>
    <button type="submit" class="btn btn-default btn-small">保存</button>
</form>

原问题:
使用angular提交form表单实现文件上传时绑定不到数据

html:

<form ng-submit="processForm()" enctype="multipart/form-data">
    <div class="form-group">
        <label class="label"><span class="tip" ng-hide="data.id">*</span>ID:</label>
        <input class="input" name="id" ng-model="data.id" maxlength="5">
    </div>
    <div class="form-group">
        <input type="file" name="preview" ng-model="data.preview">
    </div>
    <button type="submit" class="btn btn-default btn-small">保存</button>
</form>

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

阅读 3.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题