Flowjs是一个和angualrjs融合比较好的一个上传组件。再上传中我们有时候需要根据不同的需求制定不同的上传方式。比较常见的上传方式有两种。第一种:只上传个文件就完事了。第二种:一般会在表单中,上传和表单项会同时往后台提交。我们的实现方式也有两种。
第一种:只上传文件
这种上传方式我们只需要在flow-init方法中定义target请求路径就可以往后台发起上传请求
当点击上传按钮时会调用vm.action.commitPicsFile($flow)
<form
flow-init="{target:vm.cache.adPicSuccessUrl,testChunks:false}"
flow-name="vm.flow"
flow-file-added="vm.action.limitTypeAndSize($file, $event, $flow )"
flow-file-success="vm.action.importSuccessAdPic($message)">
<div class="form-group">
<div>{{::'am.secondaryMenu.tools.captivePortalPageServer.msg.uploadPicture'| i18next}}:</div>
<input type="text" placeholder="Choose file" ng-disabled="true"
value="{{$flow.files[0].name}}" style="width: 65%"
ng-model="vm.cache.currentItem.successAdPicName">
<button class="btn btn-primary" flow-btn>{{::'am.secondaryMenu.tools.captivePortalPageServer.msg.Browse'| i18next}}</button>
<button id="success_advertisement_2" type="button" class="btn btn-primary"
ng-click="vm.action.commitPicsFile($flow)"
title="{{::'button-label.import' | i18next}}">{{::'button-label.import' | i18next}}
</button>
</div>
<div class="form-group">
<label style="color: red; font-size: 1rem">{{::'am.secondaryMenu.tools.captivePortalPageServer.msg.functionInformation'| i18next}}</label>
</div>
<div class="form-group">
<div>{{::'am.secondaryMenu.tools.captivePortalPageServer.msg.linkedUrl'| i18next}}:</div>
<input class="form-control" ng-model="vm.cache.currentItem.successAdSrc" placeholder="http|https://"
ov-validator="vm.action.rules.url"
validator-group-id="vm.constant.captivePortalPage.validatorGroupIdSuccess">
</div>
</form>
vm.action.commitPicsFile = function ($flow) {
console.log("$flow.files.length", $flow.files.length);
if ($flow.files.length > 0 && $flow.files.length <= 5) {
$flow.upload();
} else {
vm.cache.alert._error($i18next('am.secondaryMenu.tools.captivePortalPageServer.msg.numberOfPicsSize'));
}
}
在上面我们会对上传的文件做格式校验以及大小的校验方式,符合上传规则才会允许上传,会调用$flow.upload();
第二种:随表单一起提交
html的代码跟上面没有区别,只是在我们点击表单提交的时候绑定一个事件,在事件中对参数进行处理即可
vm.action.commitPicsFile = function ($flow) {
$flow.opts.query = {
templateName:vm.cache.currentItem.templateName
};
vm.flow.upload();
}
如上,可以将你想往后台传递的参数定义在query中,在提交的时候就可以一同提交到后台