前端上传图片到七牛云

前端如何上传图片到七牛云

流程：
1、七牛云后台的对象存储功能
2、node.js后台生成七牛云的token
3、前端利用element UI/ice 的upload组件
4、文件名和token作为参数请求到七牛云后台

第一步 node.js后台生成七牛云的token

token

const accessKey = 'TSlScX_akS5TIpsXlkq*****7Efk-ZaZeg4ZWtta';
const secretKey = 'X-MGLySWVrWFIQKTn***WDIBvb3ni4Zm3qwZNKxk';
const bucket = 'deluntiyun';

如何获取这三个参数

accessKey 就是AK
secretKey 就是SK

bucket 就是你的空间名字

我的token是koa后台请求回来的，附上代码 node的话qiniu模块
非node的话自行查询Node.js SDK

let qiniu = require('qiniu'); // 需要加载qiniu模块的
const accessKey = 'TSlScX_akS5TIpsXl****gy7Efk-ZaZeg4ZWtta';
const secretKey = 'X-MGLySWVrWFI****87HWDIBvb3ni4Zm3qwZNKxk';
const bucket = 'deluntiyun';router.post('/token', async(ctx, next)=> {let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);let options = {scope: bucket,expires: 3600 * 24};let putPolicy =  new qiniu.rs.PutPolicy(options);let uploadToken= putPolicy.uploadToken(mac);if (uploadToken) {ctx.body = Code('re_success', uploadToken)} else {ctx.body = Code('re_error')}
})

token也是在前端来生成的，加载qiniu模块，利用其方法就可以生成token

第二步上传到七牛云 - Vue

ui框架 element-ui el-upload

koa2 请求到七牛云的token

let qiniu = require('qiniu'); // 需要加载qiniu模块的
const router = require('koa-router')()
router.prefix('/api/admin/qiniu')let config = {"AK":"TSlScX_akS5TIpsXlkqHH2gy7Efk-ZaZeg4ZWtta","SK":"X-MGLySWVrWFIQKTn87HWDIBvb3ni4Zm3qwZNKxk","Bucket":"mobile-phone-shell"
}router.post('/token', async(ctx, next)=> {let mac = new qiniu.auth.digest.Mac(config.AK, config.SK);let code = '1',msg = '', data = {};let options = {scope: config.Bucket,expires: 3600 * 24};let putPolicy =  new qiniu.rs.PutPolicy(options);let uploadToken= putPolicy.uploadToken(mac);if (uploadToken) {code = '0';data.uploadToken = uploadToken;ctx.body = {code, data, msg}} else {ctx.body = {code, data, msg}}
})module.exports = router

前端代码

<el-upload
<el-uploadstyle='position: relative;top: 10px;height: 120px;':file-list='fileList'class="avatar-uploader":limit='1':action="uploadUrl"accept="image/jpeg,image/gif,image/png,image/bmp"list-type="picture-card":data='uploadData':on-success="handleAvatarSuccess":on-error="uploadError":before-upload="beforeAvatarUpload":on-preview="doLookImg":on-remove="doDeleteImg"><i class="el-icon-plus"></i></el-upload>
<script>export default {data() {return {uploadUrl: 'http://up-z0.qiniu.com',uploadData: {key:'',token:''},formAdd: { brandLogo: '' }}},mounted() {getQiniuToken({}).then((res)=> {console.log(res);if (res.code === '0') {this.uploadData.token = res.data.uploadToken}})},methods: {doDeleteImg(file, fileList) {console.log('删除成功',file, fileList)let logoAry;let key;if (this.editState) {logoAry = this.mainInfo.brandLogo.split('/');} else {logoAry = this.formAdd.brandLogo.split('/');}key = logoAry[logoAry.length - 1];deleteQiniuImg({key}).then(res=> {if (res.code === '0') {if (this.editState) {this.mainInfo.brandLogo = '';} else {this.formAdd.brandLogo = '';}} else {this.$message.error(res.msg)}})},doLookImg() {this.uploadDialogVisible = true;this.uploadDialogImg = this.editState ? this.mainInfo.brandLogo : this.formAdd.brandLogo;},handleAvatarSuccess(res, file, fileList) {console.log('上传成功', res,file, fileList)let hash = res.hash;let key = res.key;if (this.editState) {this.mainInfo.brandLogo = qiniuConfig.qiniuPath + '/' + key;} else {this.formAdd.brandLogo = qiniuConfig.qiniuPath + '/' + key;}},beforeAvatarUpload(file) {console.log(file, 'beforeAvatarUpload')// var observable = qiniu.upload(file, key, token, putExtra, config)const isPNG = file.type === "image/png";const isJPEG = file.type === "image/jpeg";const isJPG = file.type === "image/jpg";const isLt2M = file.size / 1024 / 1024 < 2;if (!isPNG && !isJPEG && !isJPG) {this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");return false;}if (!isLt2M) {this.$message.error("上传头像图片大小不能超过 2MB!");return false;}this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`;},uploadError(err, file, fileList) {this.$message({message: "上传出错，请重试！",type: "error",center: true});},}
}
</script>

作者：sponing
链接：https://www.jianshu.com/p/7520e0bee777
来源：简书

前端上传图片到七牛云相关推荐

上传图片到七牛云（前端和后端）
在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致项目越来越臃肿,因此可以考虑把图片上传交给第三方处理,此处采用七牛云进行图片存储. 经过测试,通过七牛云获取图片确实比 ...
前端如何上传图片到七牛云
From: https://www.jianshu.com/p/7520e0bee777 前端如何上传图片到七牛云流程: 生成token => token和图片作为new FromData() ...
html5七牛图片上传js,前端如何上传图片至七牛云
上传文件是我们在前端开发中经常遇到的一个问题.最近在做某项目管理后台的时候,需要将轮播图上传至七牛云.以前在Vue里面做过类似的功能,但是在Angular中使用同样的方法发现行不通. 此篇文章主要介绍 ...
七牛云上传图片到七牛云并返回图片URL
七牛云上传图片到七牛云并返回图片URL 鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834 在开发项目的时候,经常会 ...
实现Java+Vue上传图片到七牛云和从七牛云删除图片
环境准备开发环境后端: JDK1.8, SpringBoot2.2.2.RELEASE, Maven3.6.3 前端: vue-element-admin4.4.0 相关链接七牛云JavaSDK ...
Django项目，上传图片到七牛云，阿里云OSS教程
Django项目,上传图片到七牛云简略步骤为: 1.注册登陆七牛云, 上传项目到阿里云OSS:链接或者到我的主页查看 2.创建存储空间,https://portal.qiniu.com/home ...
前端批量下载七牛云文件
前端批量下载七牛云文件 // 组装文件名称getFileUrl(row) {var name = row.filename + '.mp3';var url = row.fileurl + '?att ...
uni-app 上传图片到七牛云
uni-app 上传图片到七牛云我的流程是:在上传图片到七牛之前,先调后端提供的接口获取token.key等,然后通过uni.uploadFile把token.key传给七牛: token:从后端获 ...
React中：富文本编辑器(react-quill),自定义上传图片到七牛云
1.组件封装 import React, { useState, useEffect, useRef } from 'react'; import ReactQuill from 'react-qui ...

前端上传图片到七牛云

前端如何上传图片到七牛云

第一步 node.js后台生成七牛云的token

第二步上传到七牛云 - Vue

前端上传图片到七牛云相关推荐

最新文章

热门文章

前端上传图片到七牛云

前端如何上传图片到七牛云

第一步 node.js后台生成七牛云的token

第二步 上传到七牛云 - Vue

前端上传图片到七牛云相关推荐

最新文章

热门文章

第二步上传到七牛云 - Vue