nodejs+multierはファイルのアップロードとダウンロードを実現します.

14363 ワード

nodejs

1.ファイルのアップロードとダウンロードについてのデモを紹介し、Mulerを中間部品として選択してデータ処理を行う.multierについては中国語翻訳ドキュメントを参照してください.https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md または公式文書2.upladファイルアップロードhtml formタグ内にenctype="multiad/form-data"を設定する必要があります.これでファイルをアップロードすることができます.形式はpostです.サーバーでmultierを使う時は、基本的に公式サイトと同じです.中間multierを参照してください.ap.post(\\upload)、uplload.single(‘name’)、function(){};ファイルのアップロードを指定して、パラメータはhtmlのinputの中のnameです.これでアップロードできますが、問題はmulterがあなたの拡張子を管理しないので、uplloadフォルダにアップロードするファイルには乱序名称がありますが、拡張子がないので、この機能を追加しました.req.fileはファイル情報であり、元の名前を取得し、配列やスタックなどの処理を経てサフィックス'.jpg'を取得し、fs.renameSync()の方法でファイル名を変更し、本来のサフィックスを加えます.このように本当にアップロードできました.唯一の欠点はファイル名の変更が実現されていないことです.公式サイトを使ってエラーが発生しました.3.downloadファイルをダウンロードするネット上では基本的にexpressのres.downloadに対するパッケージとfs方法がメインであり、フォルダを静的なファイルに設定することに注意する.問題はクリックしたら、ダウンロードするファイルを新しいページに表示します.写真でも音楽でも.これは私を困らせましたが、長く探してもよく解決できませんでした.IEでアクセスした結果、ダウンロードするかそれとも表示するかのオプションがあります.大好きです.とにかくこのようにしました.一晩の努力で満足しています.にこにこする
//サーバー/index.js

var fs = require('fs')
var express = require('express')
var multer = require('multer')
const path = require('path');

 var app = express();
 var upload = multer({dest:'upload/'});

//      （        ）（      ）
app.post('/upload-multi',upload.array('myfile',2),function(req,res,next){
    res.send("2 done");
})
//         
app.post('/upload-single',upload.single('myfile'),function(req,res,next){
    var file=req.file;
    // console.log("  ：%s",file.originalname);
    // console.log("mime：%s",file.mimetype);
//          
    name=file.originalname;
    nameArray=name.split('');
    var nameMime=[];
    l=nameArray.pop();
    nameMime.unshift(l);
    while(nameArray.length!=0&&l!='.'){
    l=nameArray.pop();
    nameMime.unshift(l);
    }
//Mime      
    Mime=nameMime.join('');
    console.log(Mime);
    res.send("done");
//            
    fs.renameSync('./upload/'+file.filename,'./upload/'+file.filename+Mime);

})

//      （chrome         。.       ）
//  download           
 app.use('/download', express.static(path.join(__dirname, 'download')));
// app.get('/download',function(req,res){
//     var path='./download/aa.mp3';
//     res.download(path,'aa.mp3');
// });
app.get('/download', function(req, res){
  var file = __dirname + '/download/aa.mp3';
  res.download(file); 
});
app.get('/',function(req,res,next){
    res.sendFile(__dirname+"/index.html");
})

app.listen(3000);

//クライアント/index.


<html>
<head>
    <title>    title>
    <meta charset="utf-8">
head>
<body>
<form enctype="multipart/form-data" action="/upload-single" method="post">
<input type="file" name="myfile">input>
<input type="submit" value="  ">input>
form>

<form enctype="multipart/form-data" action="/upload-multi" method="post">
<input type="file" name="myfile">input>
<input type="file" name="myfile">input>
<input type="submit" value="  ">input>
form>
<a href="download/aa.mp3">    a>
body>
html>

3.後続(2077月21日更新)は上記の方法で更新ページを提出する問題があります.どのように書類を提出すればページに影響がありませんか?この問題に遭遇して多くの資料を調べて、簡単な処理方法を見つけました.

html:
<form enctype="multipart/form-data" action="/api/images/uploadimages" method="post" target="hidden-iframe">
           <input type="file"  accept="image/png,image/jpg,image/jpeg" name="fabricImages">
           <input type="submit"  value="  ">
         form>
         <iframe name="hidden-iframe" style="display: block; width: 150px;height: 50px;overflow: hidden; background-color: pink">iframe>

このようにサーバーでmultierを使ってファイルを受け入れて保存して、その後res.send(『アップロード成功』);この戻り文字はiframeに表示されます.ページは常に更新されません.戻り値も検出できます.
フォームには隠し属性があります.targetはiframeがページ機能を更新しないようにすることができます.inputのaccept属性制限提出ファイルの種類は、通常の画像フォーマットのみとなります.
4.ファイルの拡張子を最適化し、私の前のコードは煩雑すぎて、最適化しました.コードは以下の通りです.var mime=filename.split(.').pop()//新しいファイル名を使用して画像ファイル名を防止します.fs.renameSync('./client/asters/uplload/'+req.file.filename,'./client/assites/uplload/'+req.file.filename+'.'+mime);ソースファイル名のサフィックスを取得して、新しいファイル名の後ろに追加すればいいです.5.後続(2017809)formタグを使用せずに提出する場合は、input type=fileのみを使用する.

<label class="custom-file-upload">
<input type="file" 
        accept="image/png,image/jpg,image/jpeg,image/gif" 
        name="myupload" id="uploadInput" style="display: none;">
 label>
 <label class="custom-file-submit">
 <button ng-click="uploadImage()" style="display: none;">button>
 label>

 $scope.uploadImage =function(){
    console.log('upload');
     var formData = new FormData();
     var myfile = document.getElementById('uploadInput').files[0];
     formData.append('fabricImage', myfile);
     $http.post('/api/images/uploadimages', formData, {
         transformRequest: angular.identity,
         headers: {'Content-Type': undefined}
     }).then(function(result){
         console.log('succeed');                
     },function(err){
         console.log(err)
     });

 }

そしてserver端でap.postを使って、uplload.single(myuplload)….そしてあなたが間違っています!!エラーが発生して、長い間外ネットワークで原因を見つけました.この時必要なのはformdata.apped(‘fabricImage’,mfile);の中のfornameと同じようにアップロードされます.(ファイル名ではなく、アップロード時のidに相当します.だから、サーバーはap.postです.
また、このように修正すれば、クリックして提出する必要がなく、直接にファイルを選択することができます.οnchange="は、ファイルをアップロードすることができます.

type="file" 
        accept="image/png,image/jpg,image/jpeg,image/gif" 
        name="myupload" id="uploadInput" style="display: none;" onchange="uploadImage()">

みんながファイルをアップロードする時に発生した問題を解決することができることを望みます.

Ubuntu最新版のnodejs&環境変数の配置をインストールします.