七牛云
參考網(wǎng)址: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:預(yù)覽
on-remove:刪除
on-success:上傳成功
before-upload:上傳之前的操作? beforeImgUpload:返回false不往下執(zhí)行
附上上傳圖片的代碼:
<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('七牛云服務(wù)器刪除失敗')
? ? ? //? }
? ? ? // })
? ? },
? ? 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>
上圖是圖片名稱? 后面可以改圖片大小
