angular কৌণিক ফাইল আপলোড



typescript (6)

এইভাবে আমি প্রকল্পে ওয়েব এপিআইতে আপলোড ফাইলটি প্রয়োগ করি।

আমি যার জন্য উদ্বেগ শেয়ার করি।

postFile(fileToUpload: File): Observable<boolean> {
  const endpoint = 'your-destination-url';
  return this.httpClient
    .post(endpoint, fileToUpload, { headers: yourHeadersConfig })
    .map(() => { return true; })
    .catch((e) => this.handleError(e));
}

ধাপে ধাপে

ASP.NET ওয়েব এপিআই

const formData: FormData = new FormData();
formData.append('fileKey', fileToUpload, fileToUpload.name);

এইচটিএমএল ফর্ম

const formData: FormData = new FormData();
formData.append('Image', image, image.name);
formData.append('ComponentId', componentId);
return this.http.post('/api/dashboard/UploadImage', formData);

এপিআই ব্যবহারের জন্য টিএস ফাইল

[HttpPost]
[Route("api/dashboard/UploadImage")]
public HttpResponseMessage UploadImage()
        {
            string imageName = null;
            var httpRequest = HttpContext.Current.Request;
            //Upload Image
            var postedFile = httpRequest.Files["Image"];
            //Create custom filename
            if (postedFile != null)
            {
                imageName = new String(Path.GetFileNameWithoutExtension(postedFile.FileName).Take(10).ToArray()).Replace(" ", "-");
                imageName = imageName + DateTime.Now.ToString("yymmssfff") + Path.GetExtension(postedFile.FileName);
                var filePath = HttpContext.Current.Server.MapPath("~/Images/" + imageName);
                postedFile.SaveAs(filePath);
            }
}

পরিষেবা টিএস

<form #imageForm=ngForm (ngSubmit)="OnSubmit(Image)">

                    <img [src]="imageUrl" class="imgArea">
                    <div class="image-upload">
                        <label for="file-input">
                            <img src="upload.jpg" />
                        </label>

                        <input id="file-input" #Image type="file" (change)="handleFileInput($event.target.files)"/>
                        <button type="submit" class="btn-large btn-submit" [disabled]="Image.value=='' || !imageForm.valid"><i class="material-icons">save</i></button>
                    </div>
                </form>

আমি কৌণিকের জন্য শিক্ষানবিশ, আমি কৌনিক 5 ফাইল আপলোড অংশটি কীভাবে তৈরি করব তা জানতে চাই, আমি কোনও টিউটোরিয়াল বা ডক সন্ধান করার চেষ্টা করছি, তবে আমি কোথাও কিছুই দেখতে পাচ্ছি না। এই জন্য কোন ধারণা? এবং আমি ng4-files চেষ্টা করছি কিন্তু এটি ng4-files 5 এর জন্য কাজ করছে না


Answer #1

ঠিক আছে, গুগলের প্রথম ফলাফলগুলির মধ্যে যেমন এই থ্রেডটি উপস্থিত হয় এবং অন্যান্য ব্যবহারকারীদের একই প্রশ্ন রয়েছে, আপনাকে ট্রুবুডা দ্বারা চিহ্নিত হিসাবে চক্রটি পুনর্জীবিত করতে হবে না এমন একটি এনজি 2-ফাইল-আপলোড লাইব্রেরি রয়েছে যা আপলোড করার এই প্রক্রিয়াটিকে সহজ করে তোলে কৌনিক 6 এবং 7 সহ ফাইলটি আপনার যা করতে হবে তা হ'ল:

সর্বশেষতম কৌণিক সিএলআই ইনস্টল করুন

yarn add global @angular/cli

তারপরে সামঞ্জস্যতা উদ্বেগের জন্য rx-compat ইনস্টল করুন

npm install rxjs-compat --save

এনজি 2-ফাইল-আপলোড ইনস্টল করুন

npm install ng2-file-upload --save

আপনার মডিউলে ফাইলসিলিটডাইরেক্টিভ নির্দেশিকা আমদানি করুন।

import { FileSelectDirective } from 'ng2-file-upload';

Add it to [declarations] under @NgModule:
declarations: [ ... FileSelectDirective , ... ]

আপনার উপাদান

import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
...

export class AppComponent implements OnInit {

   public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'photo'});
}

টেমপ্লেট

<input type="file" name="photo" ng2FileSelect [uploader]="uploader" />

আরও ভাল বোঝার জন্য আপনি এই লিঙ্কটি পরীক্ষা করতে পারেন: কৌনিক 6/7 দিয়ে কোনও ফাইল কীভাবে আপলোড করবেন


Answer #2

খুব সহজ এবং দ্রুততম পদ্ধতিটি ng2-file-upload ব্যবহার ng2-file-upload

এনপিএম-এর মাধ্যমে এনজি 2-ফাইল-আপলোড ইনস্টল করুন। npm i ng2-file-upload --save

আপনার মডিউলটিতে প্রথমে আমদানি করুন।

import { FileUploadModule } from 'ng2-file-upload';

Add it to [imports] under @NgModule:
imports: [ ... FileUploadModule, ... ]

মার্কআপ:

<input ng2FileSelect type="file" accept=".xml" [uploader]="uploader"/>

আপনার সংস্থার ts এ:

import { FileUploader } from 'ng2-file-upload';
...
uploader: FileUploader = new FileUploader({ url: "api/your_upload", removeAfterUpload: false, autoUpload: true });

এটি এর সহজ ব্যবহার। এর সমস্ত শক্তি জানতে demo


Answer #3

আমি কৌনিক 5.2.11 ব্যবহার করছি, গ্রেগোর ডোরোশেঙ্ককো প্রদত্ত সমাধানটি আমার পছন্দ হয়েছে তবে আমি লক্ষ্য করেছি যে আপলোড করা ফাইলটি শূন্য বাইটের, এটি আমার কাজ করার জন্য আমাকে একটি ছোট পরিবর্তন করতে হয়েছিল।

OnSubmit(Image) {
    this.dashboardService.uploadImage(this.componentId, this.fileToUpload).subscribe(
      data => {
        console.log('done');
        Image.value = null;
        this.imageUrl = "/assets/img/logo.png";
      }
    );
  }

নিম্নলিখিত লাইনগুলি (ফর্মডাটা) আমার পক্ষে কার্যকর হয়নি।

uploadImage(componentId, image) {
        const formData: FormData = new FormData();
        formData.append('Image', image, image.name);
        formData.append('ComponentId', componentId);
        return this.http.post('/api/dashboard/UploadImage', formData);
    }

https://github.com/amitrke/ngrke/blob/master/src/app/services/fileupload.service.ts


Answer #4

এটা চেষ্টা কর

ইনস্টল করুন

npm install primeng --save

আমদানি

import {FileUploadModule} from 'primeng/primeng';

এইচটিএমএল

<p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
    accept="image/*" auto="auto"></p-fileUpload>

Answer #5

কৌণিক এবং নোডেজ (এক্সপ্রেস) ব্যবহার করে ফাইল আপলোডের সম্পূর্ণ উদাহরণ

এইচটিএমএল কোড

            <div class="form-group">
                <label for="file">Choose File</label><br/>
                <input type="file" id="file" (change)="uploadFile($event.target.files)" multiple>
            </div>

টিএস কম্পোনেন্ট কোড

uploadFile(files) {
    console.log('files', files)
        var formData = new FormData();

    for(let i =0; i < files.length; i++){
      formData.append("files", files[i], files[i]['name']);
        }

    this.httpService.httpPost('/fileUpload', formData)
      .subscribe((response) => {
        console.log('response', response)
      },
        (error) => {
      console.log('error in fileupload', error)
       })
  }

নোড জেএস কোড

ফাইলআপলোড API কন্ট্রোলার

function start(req, res) {
fileUploadService.fileUpload(req, res)
    .then(fileUploadServiceResponse => {
        res.status(200).send(fileUploadServiceResponse)
    })
    .catch(error => {
        res.status(400).send(error)
    })
}

module.exports.start = start

মাল্টার ব্যবহার করে পরিষেবা আপলোড করুন

const multer = require('multer') // import library
const moment = require('moment')
const q = require('q')
const _ = require('underscore')
const fs = require('fs')
const dir = './public'

/** Store file on local folder */
let storage = multer.diskStorage({
destination: function (req, file, cb) {
    cb(null, 'public')
},
filename: function (req, file, cb) {
    let date = moment(moment.now()).format('YYYYMMDDHHMMSS')
    cb(null, date + '_' + file.originalname.replace(/-/g, '_').replace(/ /g,     '_'))
}
})

/** Upload files  */
let upload = multer({ storage: storage }).array('files')

/** Exports fileUpload function */
module.exports = {
fileUpload: function (req, res) {
    let deferred = q.defer()

    /** Create dir if not exist */
    if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir)
        console.log(`\n\n ${dir} dose not exist, hence created \n\n`)
    }

    upload(req, res, function (err) {
        if (req && (_.isEmpty(req.files))) {
            deferred.resolve({ status: 200, message: 'File not attached', data: [] })
        } else {
            if (err) {
                deferred.reject({ status: 400, message: 'error', data: err })
            } else {
                deferred.resolve({
                    status: 200,
                    message: 'File attached',
                    filename: _.pluck(req.files,
                        'filename'),
                    data: req.files
                })
            }
        }
    })
    return deferred.promise
}
}




typescript