困扰了一夜 的node+vue单图上传到七牛云，笔记一下...

vue页面代码

<template>
  <div id="MyAdd">
    <input type="file" name="image" accept="image/*" @change="uploadImg($event)">
    <img :src="list" width="100px" height="100px">
    {{list}}
  </div>
</template>

<script>
const Base_Img = "http://pqg87dxpt.bkt.clouddn.com/"
import { putQiniu } from "../../API/index.js";

export default {
  name: "MyAdd",
  data() {
    return {
      list: ""
     };
  },
  methods: {
    // 这是方法，ajax请求封装在了../../API/index.js中
    async uploadImg(event) {
        var file = event.target.files[0];
        console.log(event.target.files)
         var Data = new FormData();
           Data.append("mypic", file);
           console.log(Data)
      let result = await putQiniu(Data);
      this.list = Base_Img+result.ret.key;   
  }

node服务端代码

var config = new qiniu.conf.Config();
// 空间对应的机房
// config.zone = qiniu.zone.Zone_z0;
//两个对应的key在七牛上自己的账号里可以找到
qiniu.conf.ACCESS_KEY = 'xxxxxx'
qiniu.conf.SECRET_KEY = 'xxxxxx'
var accessKey = qiniu.conf.ACCESS_KEY;
var secretKey = qiniu.conf.SECRET_KEY;
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);


// 文件上传
router.post('/qiniu', function (req, res, next) {
//七牛上自己的存储空间名
  let bucket = 'cate',
    key = '',
    form = formidable.IncomingForm(),
    token, putPolicy;

  console.log(req.body)
  console.log("----------------")
  console.log(req.query)
  console.log("----------------")
  console.log(req.params)
  // 备份图片到images目录下
  // form.uploadDir = path.join(__dirname, '../', 'public/images');
  form.keepExtensions = true
  
  form.parse(req, function (err, fields, files) {
    if (err) {
      console.log(err);
    }
    // key-七牛中保存和返回的图片名称;files.mypic.name-上传的图片名称（有可能会重复）
    // key = files.mypic.name;
    key = files.mypic.path.split(path.sep).pop();
    console.log(key)
    var options = {
      scope: bucket + ':' + key,
    };
    putPolicy = new qiniu.rs.PutPolicy(options);
    token = putPolicy.uploadToken(mac);
    console.log('token', token)
    let extra = new qiniu.form_up.PutExtra();
    var formUploader = new qiniu.form_up.FormUploader(config);
      formUploader.putFile(token, key, files.mypic.path, extra, function (err, ret) {
      console.log("11111111111111")
      if (err) {
        console.log(err)
      }
      console.log('ret', ret);
      res.json({
        code:"200",
        token: token,
        ret: ret,
        files: files,
        fields: fields
      })
    })
  })

})

运行效果图

服务端

客户端

功能代码就是这些，样式再做修改就好了。。。