如何把前端用ajax發過來的圖片傳到node上，而且用node保存在oss圖片服務器上？

一：只上傳一張圖片

1.1：node須要安裝的插件，先安好

npm install ali-oss uuid co --save

 

A、ali-oss

　　用途：aliyun OSS(Object Storage Service) js client for Node and Browser env；

　　文檔地址：https://www.npmjs.com/package/ali-oss

　　學習參考地址：https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.11186623.2.10.26884367L6zw5e#concept-qp2-g4y-5db

B、co

　　用途：處理Generator 函數的插件返回promise

　　文檔地址：https://www.npmjs.com/package/co

C、uuid：

　　用途：是簡單，快速生成RFC4122 UUIDS的插件；

　　文檔地址：https://www.npmjs.com/package/uuid；

1.2：前端上傳代碼

A、 html代碼是用的weui的彈框，裏面加了weui的upload樣式，本身再用css改了一下，代碼以下

<div id="dialog_upload" class="out_myDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd">
            <strong class="weui-dialog__title">
               select the picture to upload！
            </strong>
        </div>
        <div class="weui-dialog__bd" id="ld-dialog__bd">
            <div class="weui-uploader__input-box">
                <img class="uploadImg" src="" alt="">
                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*">
            </div>
        </div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default cart_cancle">Cancle</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary confirm_delect">Confirm</a>
        </div>
    </div>
</div>

View Code

B、 css改動這裏不涉及，本身寫吧

C、 前端樣式以下

D、 js實現展現圖片和保存圖片到formdata裏面，代碼以下：

//點擊file類型的input的事件
$("#uploaderInput").on("change",function(){
            var files = $(this).prop('files'); //獲取圖片的文件
            if(files.length>0){
                hasImg = true;
                var windowURL = window.URL || window.webkitURL; 
                var src=windowURL.createObjectURL(files[0]);//建臨時路徑
                $(".uploadImg").attr({src:src}) //把選的圖片展現出來
                // console.log(files[0]);
                headImgFordata = new FormData();
                headImgFordata.append('avatar', files[0]); //文件保存在formdata裏面，便於提交到後臺
            }else{
                hasImg = false;
                headImgFordata = null;
            }
           
        })

View Code

選完圖片的樣子：

 

E、 上傳圖片到node的js代碼：

//點擊確認按鈕的事件，把數據傳到node
function toConfirmLay(){ //確認上傳頭像點擊事件
        if(!hasImg){
            lopdealsToast("error","Please select a valid picture ！！",2000,false) //本身封裝的展現錯誤提示的方法
            return false;
        }
        $.ajax({
                type:"POST",
                url:apiUrl["apipostUserUpHead"], //接收的地址
                data:headImgFordata,
                dataType: 'JSON',  
                processData: false,  
                contentType: false, 
                success:function(res){
                    console.log(res)
                    if(res.code == 5200){//請求成功
                       
                      //。。。本身處理髮送成的時候的代碼。。。。
                       
                    }else{ //請求失敗
                        lopdealsToast("error","Fail !!!",1500,false)
                    }
                },
                error:function(res){
                    lopdealsToast("error","Fail !!!",1500,false)
                }
            });
     }

View Code

1.3：node的接收和把圖片上傳到oss

//在node端的接收和處理這個上傳接口的地方寫下面代碼

//先引入下面這些插件
const formidable = require('formidable');
const OSS = require('ali-oss');
const co = require('co');
const fs=require('fs');
const config = require('./common/ossConfig.js');//配置oss的文件
const uuidv1 = require('uuid/v1'); //生成隨機數


//。。。。  省略的代碼



//處理該接口的方法
。。。function(req,res){
      try{
         var form = new formidable.IncomingForm();
         const client = new OSS({ //oss
            region: config.region, // 域名所在地
            accessKeyId: config.accessKeyId,
            accessKeySecret: config.accessKeySecret,
            bucket:config.bucket
          });
         //設置文件上傳存放地址
         //執行裏面的回調函數的時候，表單已經所有接收完畢了。
         form.uploadDir=config.localImgpath; //這個必定要設置不然是默認地址找不到會報錯
         form.parse(req, function(err, fields, files) {
            if(err){
               return commonError.server(req,res,"",err,false); 
            }else{
               const extName=files.avatar.name; //得到圖片的名字和後綴名
               const randomNum=uuidv1(); //生成隨機數
               const oldPath = files.avatar.path ;
               const newPath=config.localImgpath+"/upload_"+ randomNum + extName;
               
               fs.rename(oldPath, newPath,function(err){ //存圖片
                  if(err){
                     return commonError.server(req,res,"",err,false); 
                  }else{
                     const key = "upload_"+randomNum+extName;
                     co(function* () {
                     //   client.useBucket(ali_oss.bucket);
                         const result = yield client.put(key, newPath); //上傳到oss
                         const imageSrc = config.imgPath + result.name;
                         fs.unlinkSync(newPath);  /*刪除文件*/
                       return res.json({code:'5200',data:[imageSrc]}); 
                 }).catch(function (err) {
                       fs.unlinkSync(newPath);  /*刪除文件*/
                       return commonError.web(req,res,"",error,false); 
                 }); 
                  } 
              });
            }
            
         })
        
      }catch(error){
        return commonError.web(req,res,"",error,false); 
      };
   }

//.........省略的

View Code

 

------------------------------

二：上傳多張圖片到oss

2.1：頁面的修改

// 1.在input上加上 mutipart的屬性，能夠一次選多張圖片

 <input name="img" id="uploaderInput" class="weui-uploader__input" multiple type="file" accept="image/*">

// 2. 在原來的傳一張圖append，到用循環append多張到formdata裏面

 headImgFordata = new FormData();
         
  headImgFordata = new FormData();
  for(var i=0, f; f=files[i]; i++){
      headImgFordata.append('images', f);
  }   

        

2.2：node端的代碼：

***
const multer = require('multer');
const moment = require('moment');

***

 postUserUpHead2: function (req, res) {/*一次上傳多張圖片到oss */
      const uploadMyDir = `./static/public/mobile/serverImg/${moment().format('YYYYMMDD')}` //存放圖片的地址
      fs.mkdirSync(uploadMyDir, {
         recursive: true // recursive 使用遞歸建立目錄，若是父目錄不存在會先建立
      })

     // OSS實例化
      const clientMy = new OSS({
         region: config.region, // 域名所在地
         accessKeyId: config.accessKeyId,
         accessKeySecret: config.accessKeySecret,
         bucket: config.bucket
      });


      const storage = multer.diskStorage({ //設置上傳中間件
         destination: function (req, file, cb) { //上傳路徑
            cb(null, uploadMyDir)
         },
         filename: function (req, file, cb) {//上傳以後的文件名
            cb(null, Date.now() + '-' + file.originalname)
         }
      })

      //設置multer的上傳
      const uploadMulter = multer({
         storage
      }).array('images') //在前臺append的formdata的名字要和這個一致


      uploadMulter(req, res, function (err) {
         if (err) {
            return commonError.web(req, res, "", err, false);
         } else {
            const randomNum = uuidv1(); //生成惟一數字
            const key = "upload_" + randomNum;
            co(function* () {
               let results = []
               const reqFiles = req.files
               for (var i = 0; i < reqFiles.length; i++) {
                  results[i] = yield clientMy.put(key, reqFiles[i].path)
                  fs.unlinkSync(reqFiles[i].path);  /*刪除文件*/
               }
               let imageSrc = [];
               results.forEach((item) => {
                  imageSrc.push(config.imgPath + item.name)
               })
               return res.json({ code: '5200', data: imageSrc });
               //  return res.json({data:imgPath})
            }).catch(function (err) {
               return commonError.web(req, res, "", err, false);
            });
         }
      })
   }