node+uniapp实现上传图片到七牛云

node+uniapp实现上传图片到七牛云

参考文章：https://segmentfault.com/a/1190000014137083 （vue前端(element-ui)，express后端实现上传图片到七牛云）

1. 注册七牛云账号
   七牛云官网：https://www.qiniu.com/

2. 在千牛云创建空间和域名
   jfzfg.com是本人的网站域名，换成自己的即可
   
   

3. 在阿里云绑定刚才创建的二级域名
   

4. 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