七牛多文件上传（node formidable）

html

用的vant的上传组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>
<body>
<div id="app">
    <van-uploader  multiple :after-read="afterRead" />
</div>
<script>
    // 在 #app 标签下渲染一个按钮组件
    new Vue({
        el: '#app',
        //template: `<van-button>按钮</van-button>`
        data:{
          url:'http://localhost:3003/upImg'
        },
        methods: {
            afterRead(file) {
                // 此时可以自行将文件上传至服务器
                console.log(file);
                let params = new FormData()
                if(file instanceof Array){
                    for(let i=0;i<file.length;i++){
                        params.append("file"+i,file[i].file)
                    }
                }else{
                    params.append("file",file.file)
                }

                let config = {
                    header:{
                        "Content-Type":"multipart/form-data"
                    }
                }
                axios.post(this.url,params,config).then(res=>{
                    console.log(res)
                }).catch(err=>{

                })
            }
        }
    });
    // 调用函数组件，弹出一个 Toast
    vant.Toast('提示');
</script>
</body>
</html>

node

  var express = require('express');
var fs = require('fs');
var path = require('path');
var qiniu = require('qiniu');
var qn = require('./qiniuMain')
var app = express();
app.all('*',function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');//*表示可以跨域任何域名都行 也可以填域名表示只接受某个域名
    res.header('Access-Control-Allow-Headers','X-Requested-With,Content-Type');//可以支持的消息首部列表
    res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');//可以支持的提交方式
    res.header('Content-Type','application/json;charset=utf-8');//请求头中定义的类型
    next();
});

//结果包装函数
let result = function (obj,bool){
    if(bool){
        return {status:0,data:obj};
    }else{
        return {status:1,data:obj};
    }
}

//上传图片
app.post("/upImg",function(req,routerRes){
    try{
        qn.upImg(req,function(res){
            console.log('res',res);
            return routerRes.send('hahhaha')
            /*if(res.status == 0){
                return routerRes.json(result(res.data,true));
            }else{
                return routerRes.json(result(res.msg,false));
            }*/
        });
    }catch(err){
        if(err){
            console.log('trycatch报错====',err);
        }
    }
})
var server = app.listen(3003, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log('running3003');
});

七牛多文件上传（node formidable）

html

node

推荐阅读更多精彩内容