upload上传文件

Posted 2020-10-06 芒果加冰

上传Excel文件代码demo：

下载上传js文件：bower install ng-file-uploa；引入js文件；

angular.module(\'dc.workflow\', [
    \'ngFileUpload\'
]);

js代码：
var data=this.data={file:null};
//定义data.file为空；

this.selectImage = function (file) {
    this.errorFileType = false;
    if (file[0].type != \'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\') {
        this.errorFileType = true;
    }
};
//判断上传文件类型，定义errorFileType为false，if()里面为判断条件，判断条件为非的时候（也就是条件不成立），errorFilterType为true；
上传文件正确时（也就是条件成立）获取上传的文件的所有信息，包括文件名称，大小，格式等等，储存在file里面；

this.importFile = function (ev) {
    if (this.errorFileType || !data.file) {
        this.errorFileType = true;
        return
    }
//这里是判断上面条件不成立的时候直接return，不执行下面的代码；
    Upload.upload({
        url: commonSvc.baseURlForDCBulk + \'api/import/\' + templateId,
        data: {ExcelFile: data.file}
//条件成立，上传文件到固定的接口地址，并且获取上传文件
    }).then(function (result) {
        //上传文件成功后所执行的代码
        $mdDialog.hide();
        $mdDialog.show({
            controller: \'tableDataImportSuccessModalCtrl\',
            controllerAs: \'$ctrl\',
            templateUrl: \'modal/data-import-export/table-data-import-success-modal.html\',
            parent: angular.element(document.body),
            targetEvent: ev,
            locals: {},
            clickOutsideToClose: false,
            fullscreen: false // Only for -xs, -sm breakpoints.
        }).then(function (result) {

        });
    }).catch(commonSvc.translateHttpError);
};

html代码：

<md-dialog style="min-width: 30%" aria-label="create table">
    <md-toolbar style="font-weight:bold;background-color:#fff; color: #000;">

        <div class="md-toolbar-tools">
            <h2>
                {{\'select-file\' | translate}}
                <span style="color: #9A9A9A; font-size: 12px; margin-left:5px;">请上传Excel文件</span>
            </h2>
            <span flex></span>
        </div>
    </md-toolbar>

    <md-dialog-content>
        <div class="md-dialog-content" style="padding-top: 0">
            <div layout="row">
                <md-input-container class="no-margin no-padding" flex>
                    <input aria-label="input" name="fileName" ng-model="$ctrl.data.file.name" disabled
                           style="height: 38px; border: 1px solid #ccc;"/>
　　　　　　　　　　　　　　　　　　　　//ng-model获取上传文件的name并显示在文本框里
                </md-input-container>
                <md-button aria-label="upload" class="select-file-btn"
                           ngf-select="$ctrl.selectImage($files)"//执行selectImage函数$files作为参数传递到函数file里面
                           accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                           ngf-pattern="\'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\'"
　　　　　　　　　　　　　　　　//这两行代码是设置上传文件的类型
                           ng-model="$ctrl.data.file"//ng-model获取上传文件储存在模板中>
                    选择文件
                </md-button>
            </div>
            <span ng-if="$ctrl.errorFileType" class="errors">*请上传Excel文件.</span>

            <p style="color: #9A9A9A; margin-top: 10px;" class="no-margin">*{{\'import-file-temp\' | translate}}</p>
            <p style="color: #9A9A9A;" class="no-margin">*{{\'import-file-temp-content\' | translate}}</p>
            <p style="color: #9A9A9A;" class="no-margin">*文件不得超过20M</p>
        </div>
    </md-dialog-content>

    <md-dialog-actions layout="row">
        <md-button aria-label="button" class="md-warn no-padding" ng-click="$ctrl.closeDialog()">
            取消
        </md-button>
        <md-button aria-label="button" class="md-primary md-raised no-padding" ng-click="$ctrl.importFile($evemt)"//点击上传直接上传文件函数>
            上传
        </md-button>
    </md-dialog-actions>
</md-dialog>