代码之家  ›  专栏  ›  技术社区  ›  FranP

分别插入产品和上传文件,但不能在角6中一起工作

angular6 typescript angular
  •  0
  • FranP  · 技术社区  · 6 年前

    我正在开发我的第一个CRUD测试应用程序。

    我有一个典型的产品名称,价格。。。以及上传产品的输入文件。

    我为表单的change事件创建了一个事件处理程序方法。工作正常。

    我创建了这个uploadFile()方法,它工作得很好。

    上传文件服务.ts 

    import {Injectable, Input} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import {Router, ActivatedRoute,Params} from '@angular/router';

import {map} from 'rxjs/operators';
import {_GLOBAL} from './global.service';
import {Observable} from 'rxjs';
import {Producto} from '../models/Producto.model';


 @Injectable()

export class UploadFileService
{
    public url:string;
    public filesToUpload:Array<File>;

    constructor()
    {
        this.url=_GLOBAL.url;//this has the URL of the REST service
        this.filesToUpload=[];
    }


    uploadFile(url:string, params:Array<string>,filesToUpload:Array<File>)
    {
        return new Promise((resolve, reject)=>{

        var formData:any= new FormData();

        var asyncRequest=new XMLHttpRequest();

        for(var i=0; i<filesToUpload.length;++i)
        {
             formData.append('filesUploaded[]',filesToUpload[i],filesToUpload[i].name);
        }

        asyncRequest.onreadystatechange=function(){
            if(asyncRequest.readyState==4){
                if(asyncRequest.status==200){
                    resolve(JSON.parse(asyncRequest.response));
                }else{
                    reject(asyncRequest.response);
                }
            }
        }

        asyncRequest.open('POST',url,true);

        asyncRequest.send(formData);
   });
}



fileChangeEvent(ElementObjectReferenceWhichTriggersEvent:any)// in this case, the input type="file"
{
    this.filesToUpload=<Array<File>>ElementObjectReferenceWhichTriggersEvent.target.files;//captura los archivos mandados en el input

    console.log(ElementObjectReferenceWhichTriggersEvent.target);

    console.log(ElementObjectReferenceWhichTriggersEvent.target.files[0]);

    console.log(this.filesToUpload);

   // return this.filesToUpload;
}

    }

    还有这项服务

    创建-product.service.ts

    关于这个我有 createProduct() 方法,它从上面的服务和 http.post() 从HTTP服务。

    问题是,这两种方法都可以单独工作,但不能一起工作。

    我是说,当我做这个服务的时候: 

    import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import {Router, ActivatedRoute,Params} from '@angular/router';

import {map} from 'rxjs/operators';
import {_GLOBAL} from './global.service';
import {Observable} from 'rxjs';
import {Producto} from '../models/Producto.model';
import {UploadFileService} from './upload-file.service';


@Injectable()

export class CreateProductService{

    public url:string;
    public errorMessage:string;
    public productToInsert:Producto;
    public imageData:string;

    constructor(
                    private _http:Http,
                    private _route:ActivatedRoute, 
                    private _router:Router,
                    private _uploadFile:UploadFileService
               )
    {


        this.url=_GLOBAL.url;
        this.errorMessage="";

        this.productToInsert=new Producto("","","","");

    }//end constructor


    ngOnInit()
    {


    }


    createProduct()
    {



        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

        let options = new RequestOptions({ headers: headers }


        this._uploadFile.uploadFile(`${this.url}/upload-file`,[],this._uploadFile.filesToUpload).then(

            (result)=>{
                console.log(result["complete_name"]);
            },
            (error)=>
            {
                console.log(error);
            }
        );

        //file is successfully uploaded, then I insert the product:

        this._http.post(`${this.url}/crear-producto`,this.productToInsert,options).pipe(
            map(

                   (res)=>{

                       console.log ("res del callback del map" + res);

                       return res.json();

                    },(err)=>{

                         return err;

                    }


                )



            ) .subscribe(

                (response)=>
                {
                    console.log(response);
                    this._router.navigate(['all-products']);


                },
                (error)=>
                {
                     console.log(error);

                }

            );



}

    }

    它的工作:文件上传和产品正确插入。。。问题是,在数据库上我想要 result["complete_name"] 要存储在“图像”字段中,然后我可以在获得所有产品后显示该图像,而不是由 http.post()

    为此,我需要捕获响应,然后使用 结果[“完整名称”]

    为此,我用 http.post() 只有当承诺的回应成功的时候。因此,当上传图像时,我捕获响应结果,将其添加到post()方法上作为参数传递的对象中,然后发送它。 

    import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import {Router, ActivatedRoute,Params} from '@angular/router';

import {map} from 'rxjs/operators';
import {_GLOBAL} from './global.service';
import {Observable} from 'rxjs';
import {Producto} from '../models/Producto.model';
import {UploadFileService} from './upload-file.service';


@Injectable()

export class CreateProductService{

    public url:string;
    public errorMessage:string;
    public productToInsert:Producto;
    public imageData:string;

    constructor(
                    private _http:Http,
                    private _route:ActivatedRoute, 
                    private _router:Router,
                    private _uploadFile:UploadFileService
                )
    {


        this.url=_GLOBAL.url;
        this.errorMessage="";

        this.productToInsert=new Producto("","","","");

    }//end constructor


    ngOnInit()
    {


    }


    createProduct()
    {



        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

        let options = new RequestOptions({ headers: headers });

        this._uploadFile.uploadFile(`${this.url}/upload-file`,[],this._uploadFile.filesToUpload).then(

        (result)=>{
            console.log(result["complete_name"]);
            this.productToInsert.imagen=result["complete_name"];


            this._http.post(`${this.url}/crear-producto`,this.productToInsert,options).pipe(


                map(

                    (res)=>{
                               return res.json();

                    },(err)=>{

                               return err;

                    }


                )).subscribe(

                    (response)=>
                    {
                        console.log( response);
                        this._router.navigate(['all-products']);


                    },
                    (error)=>
                    {
                        console.log(+error);

                     }

                );

            },
            (error)=>{
                console.log(error);

            }

       );
   }

}

    但那不管用。我得到一个200的响应,但在本例中,对象似乎是空的(所有字段都为空),而不是来自表单的。

    这是所用的表格

    create-product-component.html创建产品组件 

    <form #formCreateProduct="ngForm" (ngSubmit)="_createProduct.createProduct();  formCreateProduct.reset()" class="col-lg-6" id="form-crear-producto-id">

    <div class="form-group">

        <label for="nombreLabel"> Name of the new product:

            <span *ngIf="!nombre.valid && nombre.touched && _createProduct.productToInsert.nombre.length != 0" class="label label-danger">Minimun 3 characters please</span>

        </label>  


       <input type="text" class="form-control" name="name" #nombre="ngModel" pattern =".{3,}"[(ngModel)]="_createProduct.productToInsert.nombre" required /> <br/>



    </div>

    <div class="form-group">

        <label for="priceLabel">Price ( € ): (please decimals with a dot. Ex:29.5)

            <span *ngIf="!precio.valid && precio.touched && _createProduct.productToInsert.precio.length != 0" class="label label-danger">Price is not valid. At least one number please, and only numbers</span>

       </label>

       <input type="text"  class="form-control" name="price" #precio="ngModel" pattern="[0-9.]+" [(ngModel)]="_createProduct.productToInsert.precio" required />  <br/>


    </div>


    <div class="form-group">

        <label for="imageLabel">Image:</label>

         <!--file doesnt suport the ngmodel-->
            <input type="file"  class="form-control" name="imagen" (change)="_uploadFile.fileChangeEvent($event)" [(ngModel)]="_createProduct.productToInsert.imagen" required /> <br/>

    </div>


    <div class="form-group">

        <label for="descriptionLabel">Description:</label>

        <div [ngClass]="{'TopLength': _createProduct.productToInsert.descripcion.length==300}">{{_createProduct.productToInsert.descripcion.length}}/300</div>

           <textarea name="description" class="form-control" maxlength="300" #descripcion="ngModel" [(ngModel)]="_createProduct.productToInsert.descripcion" cols="40" rows="3" ></textarea> <br/>


     </div>



     <input type="submit" value={{title}}  [disabled]="formCreateProduct.invalid" class ="btn btn-lg btn-success" /> <br/>

</form>

    我知道,因为这是我第一个使用angular的应用程序,所以服务和类似的东西使用起来可能有点奇怪,但我试过:

    • 避免服务并将它们直接放入component.ts

    • 只对create-component-service.ts使用一个服务,将所有方法(uploadFile、eventHandler、createProduct)放在那里,并在组件上使用它们(我猜这实际上是使用服务的正确方法)。

    • 绑定“this”作用域以查看arrow函数中的作用域是否有任何问题。

    但没什么用。我不知道为什么我可以访问和正确使用的对象和两种方法时,我分别使用,但我发现这个问题时,使用这种方式在一起,这是老师告诉我们要做的。

    一个可能对你有用的提示是,在某个地方我得到了一个错误(在其他lol中),但是我必须说这个错误和其他的错误给了我上传文件和创建产品一个独立的方式没有问题,所以我计划稍后调试它们。 

    Uncaught (in promise): SecurityError: The operation is insecure. ./node_modules/@angular/platform-browser/fesm5/platform-browser.js/DefaultDomRenderer2.prototype.setProperty@http://localhost:4200/vendor.js:56793:9 ./node_modules/@angular/core/fesm5/core.js/DebugRenderer2.prototype.setProperty@http://localhost:4200/vendor.js:42592:9 ./node_modules/@angular/forms/fesm5/forms.js/DefaultValueAccessor.prototype.writeValue@http://localhost:4200/vendor.js:48231:9 setUpModelChangePipeline/<@http://localhost:4200/vendor.js:49205:9 ./node_modules/@angular/forms/fesm5/forms.js/FormControl.prototype.setValue/<@http://localhost:4200/vendor.js:50262:65 ./node_modules/@angular/forms/fesm5/forms.js/FormControl.prototype.setValue@http://localhost:4200/vendor.js:50262:13 ./node_modules/@angular/forms/fesm5/forms.js/NgModel.prototype._updateValue/<@http://localhost:4200/vendor.js:51617:46 ./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:2710:17 onInvoke@http://localhost:4200/vendor.js:35055:24 ./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:2709:17 ./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:4200/polyfills.js:2460:24 scheduleResolveOrReject/<@http://localhost:4200/polyfills.js:3194:29 ./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2743:17 onInvokeTask@http://localhost:4200/vendor.js:35046:24 ./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2742:17 ./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:4200/polyfills.js:2510:28 drainMicroTaskQueue@http://localhost:4200/polyfills.js:2917:25 ./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask@http://localhost:4200/polyfills.js:2822:21 invokeTask@http://localhost:4200/polyfills.js:3862:9 globalZoneAwareCallback@http://localhost:4200/polyfills.js:3888:17
    1 回复  |  直到 6 年前
        1
  •  0
  •   FranP    6 年前

    我解决了。这是一个虚拟的东西:

    问题是,在我的组件中,从以前的版本来看,我的表单上有:

    <form #formCreateProduct="ngForm" (ngSubmit)="_createProduct.createProduct();formCreateProduct.reset()" class="col-lg-6" id="form-crear-producto-id">

    reset()方法在我实际发送表单值之前将所有表单值设置为空。删除了这个方法(在新版本上我做了一个重定向,所以我不需要它),并解决了问题。两天。。。:O个

    推荐文章
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号