七牛云
参考网址: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）在页面中写
<el-upload
: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"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
其中action:上传的地址 七牛云:http(s)://upload.qiniup.com
data:请求体 postData：{token}
on-preview:预览
on-remove:删除
on-success:上传成功
before-upload:上传之前的操作 beforeImgUpload:返回false不往下执行
附上上传图片的代码:
<template>
<div class="lmjboxcontain">
<el-upload
:action="actionUrl"
list-type="picture-card"
:data="postData"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:auto-upload="true"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeImgUpload"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
// import {get} from '../../service/request'
export default {
props: {},
components: {},
data() {
return {
actionUrl:'https://upload.qiniup.com',
postData:{},
dialogImageUrl: "",
dialogVisible: false
};
},
computed: {},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
// deletes("/qiniu/deleteFile?key=FnlW9-wyPRB2AQgyHlAz-9-Tdzl0").then((res)=>{
// console.log(res)
// if(res.code===1){
// this.$message.success('删除成功')
// }else{
// this.$message.success('七牛云服务器删除失败')
// }
// })
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeImgUpload(file){
const isJPEG=file.type==='image/jpeg';
const isLt2M=file.size/1024/1024<2;
if(!isJPEG){
this.$message.error('上传头像图片只能是JPEG格式')
}
if(!isLt2M){
this.$message.error('上传头像图片大小不能超过2MB')
}
return isJPEG&&isLt2M
},
uploadSuccess(response,file,fileList){
console.log(response)
},
uploadError(err,file,fileList){
console.log(err)
}
},
created() {
axios.get('/api/qiniu/token').then((res)=>{
console.log(res)
this.postData={
token:res.data.uptoken
}
})
},
mounted() {}
};
</script>
<style scoped lang="">
</style>
上图是图片名称 后面可以改图片大小
