flowjs上传组件与参数传递

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中，在提交的时候就可以一同提交到后台

flowjs上传组件与参数传递

猜你喜欢