node+uniapp实现上传图片到七牛云
node+uniapp实现上传图片到七牛云参考文章:https://segmentfault.com/a/1190000014137083(vue前端(element-ui),express后端实现上传图片到七牛云)注册七牛云账号七牛云官网:https://www.qiniu.com/在千牛云创建空间和域名jfzfg.com是本人的网站域名,换成自己的即可在阿里云绑定刚才创建的二级域名node配置
·
node+uniapp实现上传图片到七牛云
参考文章:https://segmentfault.com/a/1190000014137083 (vue前端(element-ui),express后端实现上传图片到七牛云)
-
注册七牛云账号
七牛云官网:https://www.qiniu.com/ -
在千牛云创建空间和域名
jfzfg.com是本人的网站域名,换成自己的即可
-
在阿里云绑定刚才创建的二级域名
-
node配置
//初始化——添加配置
npm init
npm i express qiniu --save
//index.js---
// 引入包
const express = require('express')
const bodyparse = require('body-parser')
// 创建服务
const app = express()
// 解析数据
app.use(bodyparse.json())
// 引入七牛云配置
const qnconfig = require('./config.js')
// 处理请求
app.get('/token', (req, res, next) => {
// console.log(qnconfig.uploadToken)
res.status(200).send(qnconfig.uploadToken)
})
// 监听3000端口
app.listen(3000, () => {
console.log('this server are running on localhost:3000!')
})
//config.js---
/*
七牛云配置
*/
const qiniu = require('qiniu')
// 创建上传凭证(accessKey 和 secretKey在七牛云个人中心中有,lytton是七牛云刚才创建的空间名称)
const accessKey = 'YOXpF0XvM_3yVDsz5C-hWwrFE5rtDAUQC3XjBQEG'
const secretKey = 'CmrhUV2xHf1d8nPCsws9wwm7jKypCPA0lRVm-7lS'
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
scope: 'lytton',
expires: 7200
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)
module.exports = {
uploadToken
}
uniapp配置
<template>
<view class="home">
测试
<button @click="upimg">图片上传</button>
<image :src="backUrl"></image>
</view>
</template>
<script>
const Home = require("../../model/Home.js"); //获取应用实例
export default {
data() {
return {
backUrl:''
}
},
mounted() {
},
methods: {
upimg() {
let that=this
uni.chooseImage({
count: 1, //默认9
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"], //从相册选择
success: function(res) {
uni.showLoading({
title: "",
mask: true
});
//Home.token是本人请求token的接口封装
Home.token({
data: {},
succ: (suc1) => {
console.log("token",suc1)
let img = res.tempFilePaths[0]; //拿到里面的
//下面的key是自己拿时间戳和随机数组成的key值
let key = new Date().getTime();
uni.uploadFile({
url: "https://up-cn-east-2.qiniup.com", //这个url是根据刚才创建七牛云空间地区有关系,我选的是华东-浙江2
filePath: img,
name: 'file',
method: "POST",
formData: {
'key': key, //key值
'token': suc1.token //七牛云token值
},
success: uploadFileRes => {
//uploadFileRes 返回了data是一个json字符串
//拿到里面的key拼接上域名,再反出去就ok了
let strToObj=JSON.parse(uploadFileRes.data);
console.log("uploadFileRes",strToObj)
let backUrl = "http://mi.jfzfg.com/" + strToObj.key;
// data.success(backUrl); //反出去链接
console.log('成功的图片链接',backUrl)
that.$data.backUrl=backUrl
uni.hideLoading();
},
fail: fail => {
uni.showToast({
title: "网络错误",
icon: "none"
});
// data.fail(fail); //反出去错误信息
uni.hideLoading();
}
})
},
fail: fail => {
uni.showToast({
title: "网络错误",
icon: "none"
});
uni.hideLoading();
}
})
},
});
}
}
}
</script>
<style>
.home {}
</style>
希望对大家有所帮助
qq:2122375078
b站:行路zfg , UID:345976264
更多推荐
已为社区贡献1条内容
所有评论(0)