ノード+ + VUEのアップロード画像を表現します

セットアップパーソナル・サーバはほとんど絵が開始アップロードを開始し、いくつかの基本的な機能を実行するために始めました。

VUEのフロントエンドを持ちます。
HTML //
 の<div>
<input type = "ファイル" 名= "ファイルは、" =を受け入れる "JPGを、.JPEG、.pngを" @チェンジ= "uploadAvatarを">
</ div>
// JS
uploadAvatar(アバター){
VaRのURL = "のhttp:// localhostを:3000";
console.log(avatar.target.files [0])
聞かせてファイル= avatar.target.files [0]
データ=新しいいるFormDataを聞かせて();
data.append( "ファイル"、ファイル、file.name)。 
data.append( 'データ'、112)
console.log(data.get( 'ファイル'))
 
この。$ http.post(URL + '/製品/ zhutu'、データ).then(機能(データ){
console.log(データ)
}、関数(応答){
console.log(レスポンス)
})
}

主な背景には、プラグイン、1.multiparty(画像を送信)するために必要があります。2.images(画像処理)。3.uuidV1(一意の名前を生成します)

//画像処理
router.post( '/ zhutu'、関数(REQ、RES、次){
console.log( 'tupian')
VARフォーム=新しいmultiparty.Form();
form.parse(REQ、関数(errは、フィールド、ファイル){
console.log(files.file [0])
// //アップロードする前にアップロードされた画像の名前を見つけます
VAR orgFilename = files.file [0] .originalFilename。
console.log(orgFilename)
// //拡張子がorgFilenameは絵がどのような形式であることを示すために写真を見つける切断します
カットが配列された後//、配列は最後のものを見つけるために
VARギ= orgFilename.split( "");
// //モザイク名前の新しい画像
VARファイル名= uuidV1()+ "" +ギ[formate.length - 1]。
//      
images(files.file[0].path) //Load image from file 
.size(1920, 1276)
.save("public/images/detail/" + fileName, {
quality: 1000
});
//返回前台存储地址
var src = "/images/detail/" + fileName;
 
res.json({
status: true,
msg: src
})
});
});

おすすめ

転載: www.cnblogs.com/ydam/p/10983572.html