如何把前端用ajax发过来的图片传到node上，并且用node保存在oss图片服务器上？...

一：node需要安装的插件，先安好

npm install ali-oss uuid co --save

 

1.ali-oss

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

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

2.co

　　用途：处理Generator 函数的插件返回promise

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

3.uuid：

　　用途：是简单，快速生成RFC4122 UUIDS的插件；

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

二：前端上传代码

1.1 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

1.2 css改动这里不涉及，自己写吧

1.3 前端样式如下

1.4 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

选完图片的样子：

 

1.5 上传图片到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

三：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

 

转载于:https://www.cnblogs.com/chun321/p/10764322.html