另一个页面上传的Polymer 2访问文件

Question

我正在使用一个简单的聚合物应用程序，其中只有几页是铁页。我在一个页面上传一个文件，然后我想在另一个页面访问这个上传的文件。

我尝试了几种方法，但似乎没有任何效果，这是示例代码

上传文件的页面

<dom-module id="file-upload-page">
    <template>
        <form method="post" enctype="multipart/form-data" action="/someation" disable-native-validation-ui no-validate>
            <my-input file={{file}} id="sampleFileInput" btn-style="primary" max-files="1" accept=".xls, .xlsx" on-drop="fileUploadChangeListener"
                label="[[localize('open_invoices_file')]]" help-text="[[localize('open_invoices_file_help')]]" no-auto required>
            </my-input>
        </form>
    </template>
    <script>
        class FileUploadPge extends Polymer.mixinBehaviors([], Polymer.Element) {
            static get is() {
                return 'file-upload-page';
            }

            static get properties() {
                return {
                }
            }
         }

         customElements.define(FileUploadPge.is, FileUploadPge);
    </script>
</dom-module>

文件被访问的页面

<dom-module id="consumer-page">
    <template>
        //some code
    </template>

    <script>
        class ConsumerPage extends Polymer.mixinBehaviors([], Polymer.Element) {

            static get is() {
                return 'consumer-page';
            }

            constructor() {
                super();
            }

            static get properties() {
                return {
                    //some properties
                }
            }

            ready() {
                super.ready();
                var temp2 = this.$.sampleFileInput;   // returns null
                var temp3 = this.shadowRoot.querySelector("#sampleFileInput"); // returns null
                var temp4 = this.root.querySelector('#sampleFileInput'); // returns null
                var temp5 = this.$$('#sampleFileInput'); // returns null
                this._refreshSelections();

            };

            _proceed() {

                var test1 = Polymer.dom(this).querySelector("#sampleFileInput"); // returns null
                var test2 = this.$.sampleFileInput; //returns null
                var test3 = document.getElementById("sampleFileInput"); //returns null
                var test4 = this.$$("sampleFileInput"); //returns null
                var test5 = this.shadowRoot; //returns some object


                var test6 = this.$$.sampleFileInput; //returns null
                var test7 = document.querySelector('sampleFileInput'); //returns null
                var test8 = document.querySelector('file-upload-page::shadow .FileUploadPge'); //returns null
                var temp4 = this.root.querySelector('#sampleFileInput');//returns null
                var temp5 = this.$$('#sampleFileInput');//returns null
                var temp6 = this.shadowRoot.querySelector('#sampleFileInput'); // returns null
            };
        }

        customElements.define(ConusmerPage.is, ConusmerPage);
    </script>
</dom-module>

相同的代码在 polymer1.0 中使用此

document.getElementById("sampleFileInput")

有人可以帮助我在其他页面访问此文件时做错了什么吗？我该如何处理 Polymer 2.0 中的这种情况？

Answer 1

正如您在 consumer-page 中所说，您正在尝试访问 #sampleFileInput 元素，它是另一个组件的子元素。

所有这些尝试：

var temp2 = this.$.sampleFileInput;
var temp3 = this.shadowRoot.querySelector("#sampleFileInput"); 
var temp4 = this.root.querySelector('#sampleFileInput');
var temp5 = this.$$('#sampleFileInput');
var test1 = Polymer.dom(this).querySelector("#sampleFileInput");

失败，因为您试图访问 consumer-page 模板中不存在的元素，而这些：

var test7 = document.querySelector('sampleFileInput');
var test8 = document.querySelector('file-upload-page::shadow .FileUploadPage');

分别失败，因为 document.querySelector() 不能 select 在影子内 dom 和 ::shadow 和 /deep/ select 或已弃用（see here).

从技术上讲，您应该可以这样 select #sampleFileInput 在 consumer-page 中：

this.parentElement // Goes back to iron-pages
    .querySelector('file-upload-page') // Selects file-upload-page
    .shadowRoot // Enters its shadow root
    .querySelector('#sampleFileInput'); // Selects the file uploader

然而，访问其他人的影子根内的元素被认为是 not so good practice 更不用说如果您对 iron-pages 页面使用延迟加载，如果 file-upload-page 不是'未加载。

相反，还有许多其他方法可以在自定义元素（例如事件或属性）之外公开信息。
如果它适合您的实现，您可以使用持有 iron-pages 的组件作为您的过程的协调者，并使用属性绑定来通知它在用户继续填写时从不同页面需要的数据。

IE中file-upload-page将上传的文件url绑定到一个属性，在parent中观察：

<iron-pages>
    <file-upload-page url="{{url}}"></file-upload-page>
    <consumer-page></consumer-page>
</iron-pages>

<script>
    class Parent extends PolymerElement {

        // ...

        static get properties() {
            return {
                url: {
                    type: String,
                    reflectToAttribute: true,
                    observer: '_urlChanged',
                },
            };
        }

        _urlChanged() {
            console.log(this.url);
        }

        // ...
    }
</script>

另一个页面上传的Polymer 2访问文件

Polymer 2 access file uploaded in another page

shadow-dom

polymer

polymer-2.x