通过Element-Ui上传图片到七牛云Node服务器

前端使用ElementUi中的Upload 上传图片

在后端node服务器需要安装两个库：

npm install qiniu
npm install multer

node服务器我使用的是express

这里需要添加处理文件中间件：

const multer = require('multer')
const upload = multer({ dest: 'uploads/' });
//处理文件
app.use(upload.single('file'));

处理请求响应：

const express = require('express');
const router = express.Router();var accessKey = 'xxx'; //七牛云密钥AK
var secretKey = 'xxx'; //七牛云密钥SK
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);router.post('/', function (req, res, next) {var options = {scope: 'xxx',//空间名};var putPolicy = new qiniu.rs.PutPolicy(options);var token = putPolicy.uploadToken(mac); //获取tokenconst file = req.file; //获取上传文件const key = file.originalname;var config = new qiniu.conf.Config();var formUploader = new qiniu.form_up.FormUploader(config);var putExtra = new qiniu.form_up.PutExtra();formUploader.putFile(token, key, file.path, putExtra, function (respErr,respBody, respInfo) {if (respErr) {throw respErr;}if (respInfo.statusCode == 200) {const { key } = respBody; //获取上传成功后的keyres.json({src: 'xxxx七牛云空间域名' + key})} else {res.json({err: '上传失败'})}});
});module.exports = router;

注：在上传之前需要先在七牛云开通空间

通过Element-Ui上传图片到七牛云Node服务器相关推荐

elementui 上传七牛_用element ui上传图片到七牛踩过的坑
前端上传图片到七牛云的流程请求后端接口获取上传凭证请求七牛云地址上传图片到七牛云上传完毕将获得七牛云返回的图片地址七牛云地址说到七牛云地址,奴家真的是一把鼻涕一把泪刚开始做图片上传的时候, ...
前端上传图片到七牛云
前端如何上传图片到七牛云流程: 1.七牛云后台的对象存储功能 2.node.js后台生成七牛云的token 3.前端利用element UI/ice 的upload组件 4.文件名和token作为参 ...
前端如何上传图片到七牛云
From: https://www.jianshu.com/p/7520e0bee777 前端如何上传图片到七牛云流程: 生成token => token和图片作为new FromData() ...
koa2 + vue上传图片到七牛云
1.首先安装插件 koa-multer 用于上传图片和qiniu. npm install --save koa-multer npm install --save koa-qiniu 2.新建文件q ...
实现Java+Vue上传图片到七牛云和从七牛云删除图片
环境准备开发环境后端: JDK1.8, SpringBoot2.2.2.RELEASE, Maven3.6.3 前端: vue-element-admin4.4.0 相关链接七牛云JavaSDK ...
微信小程序上传图片到七牛云
七牛云上传图片第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...
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 ...
七牛云上传图片到七牛云并返回图片URL
七牛云上传图片到七牛云并返回图片URL 鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834 在开发项目的时候,经常会 ...

通过Element-Ui上传图片到七牛云Node服务器

通过Element-Ui上传图片到七牛云Node服务器相关推荐

最新文章

热门文章