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



typescript (5)

আমি কৌনিক 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

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


Answer #1

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

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

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>

Answer #2

এপিআই-তে ফাইল আপলোড করার জন্য এখানে একটি কার্যকারী উদাহরণ রয়েছে:

পদক্ষেপ 1: এইচটিএমএল টেমপ্লেট (ফাইল-আপলোড.কোমেনটি html)

টাইপ file সহজ ইনপুট ট্যাগ সংজ্ঞায়িত file । ফাইল নির্বাচন করার জন্য - (change) একটি ফাংশন যুক্ত করুন।

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

পদক্ষেপ 2: টাইপস্ক্রিপ্টে হ্যান্ডলিং আপলোড করুন (ফাইল-আপলোড.কম্পোনাল.টিস)

নির্বাচিত ফাইলের জন্য একটি ডিফল্ট ভেরিয়েবল সংজ্ঞা দিন।

fileToUpload: File = null;

আপনার ফাইল ইনপুট ট্যাগের (change) -তে আপনি যে ফাংশন ব্যবহার করেন তা তৈরি করুন:

handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

আপনি যদি মাল্টিফাইল নির্বাচন পরিচালনা করতে চান তবে আপনি এই ফাইলগুলির অ্যারের মাধ্যমে পুনরাবৃত্তি করতে পারেন।

এখন আপনাকে ফাইল-আপলোড.সর্ভাইস কল করে ফাইল আপলোড ফাংশন তৈরি করুন:

uploadFileToActivity() {
    this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
      // do something, if upload success
      }, error => {
        console.log(error);
      });
  }

পদক্ষেপ 3: ফাইল-আপলোড পরিষেবা (file-upload.service.ts)

FormData পদ্ধতির মাধ্যমে একটি ফাইল আপলোড করে আপনার FormData ব্যবহার করা উচিত, কারণ আপনি http অনুরোধে ফাইল যুক্ত করতে পারেন।

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

সুতরাং, এটি খুব সাধারণ কাজের উদাহরণ, যা আমি আমার কাজে প্রতিদিন ব্যবহার করি।


Answer #3

খুব সহজ এবং দ্রুততম পদ্ধতিটি 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 #4

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

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

            <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