vue结合egg的七牛云上传图片详解

七牛云

参考网址:https://blog.csdn.net/Zhooson/article/details/78749205

1.在vue项目中

2.在egg router.js中写router.get('/qiniu/token',controlle.qiniu.getToken);

3.在egg controller 中新建js文件并进行如下操作:

（1）引入七牛:var qiniu = require("qiniu");  要先在后台中下包（npm i qiniu --save）

(2) 引入path和fs: var path = require("path")

var fs=require('fs');

(3) var config=JSON.parse(fs.readFileSync(path.resolve(__dirname,"config.json")));

（4）在controller中新建config.json

(5) config.json中写

{

    "AccessKey": "BqT4NGrPP045KPIzNFejv0kcK_EsApP81rxc8pYH",

    "SecretKey": "MpjGyi-1MT3xFwIFBVK31C8O9GJMf8YnSkC3iKJu",

    "Bucket": "muen",

    "UptokenUrl": "uptoken",

    "Domain": "pvwniq9y1.bkt.clouddn.com"

}

（6）在qiniu.js中写密钥对象:var mac = new qiniu.auth.digest.Mac(config.AccessKey, config.SecretKey);

(7) 在 async中 var token = putPolicy.uploadToken(mac);

（8）上传的信息    scope（哪一个空间） returnBody（返回的信息）

key（要和域名拼接  拼接好之后得到完整路径）

var options = {

    scope: config.Bucket,

    returnBody:

      '{"key":"$(key)","hash":"$(etag)","fsize":$(fsize),"bucket":"$(bucket)","name":"$(x:name)"}'

  };

（9） 上传的配置对象

var putPolicy = new qiniu.rs.PutPolicy(options);

(10)  ctx.body={

            uptoken: token,

            domain: config.Domain

        }

(11)运行可拿到token（在小黑板中运行curl http://127.0.0.1:7001/qiniu/token）

（12）在页面中写

      :action="actionUrl"

      list-type="picture-card"

      :data="postData"

      :on-preview="handlePictureCardPreview"

      :on-remove="handleRemove"

      :auto-upload="true"

      :on-success="uploadS"

      :on-error="uploadError"

      :before-upload="beforeImgUpload"

    >

     

   

   

     

   

其中action:上传的地址  七牛云:http(s)://upload.qiniup.com

data:请求体  postData：{token}

on-preview:预览

on-remove:删除

on-success:上传成功

before-upload:上传之前的操作  beforeImgUpload:返回false不往下执行

附上上传图片的代码:

上图是图片名称  后面可以改图片大小