当前位置: 首页 > news >正文

vue+element ui上传图片到七牛云服务器

本来打算做一个全部都是前端完成的资源上传到七牛云的demo,但是需要获取token,经历了九九八十一难,最终还是选择放弃,token从后端获取(springboot)。如果你们有前端直接能解决的麻烦记得私我哦!!!

效果展示

在这里插入图片描述

先看看文档:
element ui :https://element.eleme.cn/#/zh-CN/component/upload
七牛云:https://developer.qiniu.com/kodo/1283/javascript

前端

  1. 首先安装七牛云的JS的sdk
npm install qiniu-js
  1. 此处域名是指向你自己的七牛云域名,目的是让照片回显。如何在七牛云中找到自己的域名请看下面。
    在这里插入图片描述
    3 .七牛云中找到自己的域名在这里插入图片描述
<template><div><el-upload class="upload-demo" action="https://upload.qiniup.com" :on-remove="handleRemove" :file-list="fileList"list-type="picture" :http-request="customUpload" accept="image/jpeg,image/gif,image/png"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件,且不超过2M</div></el-upload></div>
</template><script>
//这里我下面会提供给,其实就是一个后端接口,后面会说怎么获取tonken的,根据自己的需求来
import { qiniuTonken } from "@/js/qiniu_token"export default {name: "photoList",data() {return {fileList: [],}},created() {this.getQiniuToken()},methods: {getQiniuToken() {qiniuTonken().then(res => {this.yourQiniuUploadToken = res.data.data})},//移除图片的处理handleRemove(file, fileList) {console.log(file, fileList);},beforeUpload(file) {// 在上传之前的逻辑,可以做一些检查或者其他处理return true; // 返回true允许上传,返回false阻止上传},customUpload(file) {const qiniu = require('qiniu-js');// 自定义上传方法,使用qiniu-js库进行上传const date = new Date();const year = date.getFullYear();const month = date.getMonth() + 1;const directory = 'sm-frontend/' + year + '/' + month + '/';const fileName = file.file.name;const key = directory + fileName;const observable = qiniu.upload(file.file, key, this.yourQiniuUploadToken);return observable.subscribe({complete(res) {// 上传完成时的回调const imageUrls = 'http://***/' + res.keyconst file_data = {name: fileName,url: imageUrls,}_this.fileList.push(file_data)// 将成功状态标记添加到文件对象中。后续测试发现不加也可以,哈哈哈。是之前直接使用this的原因。这里就不去掉了。const uploadedFileIndex = _this.fileList.findIndex(file => file.url === imageUrls);//使用了 findIndex 方法来找到对应文件的索引,然后将状态标记为成功。请尝试修改代码并重新测试上传功能if (uploadedFileIndex !== -1) {console.log(uploadedFileIndex)this.fileList[uploadedFileIndex].status = 'success';}},next(res) {// 上传过程中的回调,如果需要可以在这里处理上传进度等信息},error(err) {// 上传出错时的回调},});}}
}
</script>

JS
在这里插入图片描述

后端

技术:springboot、maven…

  1. 引入maven
        <!-- 七牛云 --><dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.7</version></dependency>
  1. 编写controller代码
package com.admin.controller.admin.email;import com.common.util.QiniuUtil;
import com.system.constant.HTTPStatus;
import com.system.response.Result;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;/*** @Classname QiniuController* @Date 2023/8/8 13:32* @Created ZFC*/
@RestController
@RequestMapping("/sys/qiniu")
public class QiniuController {@GetMapping("/getUpToken")public Result getUpToken(@RequestParam(value = "key", required = false) String key){return new Result().setCode(HTTPStatus.SUCCESS).setData(QiniuUtil.getToken(key));}
}
  1. util代码
import com.qiniu.util.Auth;
import lombok.extern.slf4j.Slf4j;@Slf4j
public class QiniuUtil {public static String getToken(String key) {Auth auth = Auth.create(***ACCESS_KEY***, ***SECRET_KEY***);return auth.uploadToken(***BUCKET***, key);}
}
  1. 获取相关参数
    ACCESS_KEY、SECRET_KEY在这里插入图片描述
    BUCKET
    在这里插入图片描述

相关文章:

vue+element ui上传图片到七牛云服务器

本来打算做一个全部都是前端完成的资源上传到七牛云的demo&#xff0c;但是需要获取token&#xff0c;经历了九九八十一难&#xff0c;最终还是选择放弃&#xff0c;token从后端获取&#xff08;springboot&#xff09;。如果你们有前端直接能解决的麻烦记得私我哦&#xff01;…...

学不动系列-git-hooks和husky+lintstage

git-hooks 为了保证提交的代码符合规范&#xff0c;可以在上传代码时进行校验。常用husky来协助进行代码提交时的eslint校验。husky是基于git-hooks来实现&#xff0c;在使用husky之前&#xff0c;我们先来研究一下git-hooks。 构建git-hooks测试项目 需要使用git-hooks就需…...

K8S相关小技巧《四》

需求&#xff1a; 我作为Kubernetes的集群管理员&#xff0c;前一段时间有收到一个需求&#xff0c;需要我创建一个受限访问的用户kubeconfig&#xff0c;提供给跳板机的某用户。 该kubeconfig需要在非Kubernetes节点的某跳板机上由指定的非root用户使用&#xff0c;该用户仅能…...

Delphi 报错 Type androidx.collection.ArraySet is defined multiple times

Delphi 11 建立一个新的 Multi-Device Application 编译成app的时候报错 报错信息 [PAClient Error] Error: E7688 Unable to execute "E:\Program\Java\jdk1.8.0_301\bin\java.exe" -cp "e:\program\embarcadero\studio\22.0\bin\Android\r8-3.3.28.jar"…...

Post请求中文乱码问题

url*************************************这里填写自己请求的网址 response requests.post(url, datajson.dumps(body),headersheader) r response.text print 打印乱码长这样&#xff1a; data:{“code”:0,“data”:{“end”:false,“message”:“{\n “ˆ—¡A”: [“…...

LeetCode -- 79.单词搜索

1. 问题描述 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水…...

单元测试、集成测试、系统测试有什么不同?

单元测试、集成测试和系统测试是软件测试开发中不可或缺的部分。 单元测试&#xff1a; 范围&#xff1a;单元测试是对软件中最小的可测试单元的测试&#xff0c;通常是函数、方法或类。 目的&#xff1a;它的目标是验证每个单独的单元是否按照预期工作&#xff0c;以增加代码…...

数据迁移DTS | 云上MySQL 数据库迁移至达梦数据库

引入 云上 MySQL 数据库 —> 向达梦国产化数据库迁移 下载&安装 达梦客户端工具 DM->可参考之前国产化专栏达梦文章 创建模式 在客户端分别依次执行以下命令脚本&#xff08;这里没有通过客户端管理工具去创建达梦数据库的模式&#xff0c;当然也可以通过图形化界…...

Linux进程管理:(二)进程调度原语

文章说明&#xff1a; Linux内核版本&#xff1a;5.0 架构&#xff1a;ARM64 参考资料及图片来源&#xff1a;《奔跑吧Linux内核》 Linux 5.0内核源码注释仓库地址&#xff1a; zhangzihengya/LinuxSourceCode_v5.0_study (github.com) 进程调度的概念比较简单&#xff0c…...

Compose 介绍

Compose 介绍 Android Compose 是 Google 官方推出的用于构建原生 Android UI 的现代工具包。它使用 Kotlin 语言编写&#xff0c;可以帮助开发人员更轻松、更快速地创建精美、响应式和高性能的 Android 应用。 Compose 的优势 声明式 UI&#xff1a; Compose 使用声明式 UI…...

5分钟搞定Python中函数的参数

函数的灵活性非常高&#xff0c;除了常规定义的位置参数以外&#xff0c;还支持默认参数、关键字参数、以及可变参数 ... 这样以来&#xff0c;不但能应对各种复杂的情况&#xff0c;甚至还可以简化调用者的代码。 位置参数 在调用函数时&#xff0c;一般会根据函数定义的参数…...

Gitlab: 私有化部署

目录 1. 说明 2. 资源要求 3. 安装 4. 配置实践 4.1 服务器 4.2 人员与项目 4.2 部署准备 4.2.1 访问变量及用户账号设置 4.2.2 Runner设置 4.2.3 要点 5. 应用项目 CI/CD 6. 参考 1. 说明 gitlab是一个强大且免费的代码管理/部署工具&#xff0c;能统一集成代码仓…...

深入理解Linux线程(LWP):概念、结构与实现机制(2)

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;会いたい—Naomile 1:12━━━━━━️&#x1f49f;──────── 4:59 &#x1f504; ◀️ ⏸ ▶️ ☰ &a…...

VBS脚本搞定,快速批量提取一堆Excel文件中的数据

1.需求诞生 小王就职于一家国有大型企业&#xff0c;工作业务十分繁忙&#xff0c;在处理企业某业务数据时&#xff0c;需要从上千个Excel文件中提取某一单元格位置的数据&#xff0c;并整理到另一个Excel文件。要说是这样的Excel文件仅有几个或者十几个也还好&#xff0c;手动…...

大数据分析案例-基于SVM支持向量机算法构建手机价格分类预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

WPF 滑动条样式

效果图&#xff1a; 浅色&#xff1a; 深色&#xff1a; 滑动条部分代码&#xff1a; <Style x:Key"RepeatButtonTransparent" TargetType"{x:Type RepeatButton}"><Setter Property"OverridesDefaultStyle" Value"true"/&g…...

论文设计任务书学习文档|基于Web的个性化简历职位推荐系统的设计与实现

文章目录 论文(设计)题目:基于Web的个性化简历职位推荐系统的设计与实现1、论文(设计)的主要任务及目标2、论文(设计)的主要内容3、论文(设计)的基本要求4、进度安排论文(设计)题目:基于Web的个性化简历职位推荐系统的设计与实现 1、论文(设计)的主要任务及目标…...

Win11系统安装安卓子系统教程

随着Win11系统的不断普及&#xff0c;以及硬件设备的更新换代&#xff0c;我相信很多同学都已经更新并使用到了最新的Win11系统。那么&#xff0c;Win11系统最受期待的功能“Windows Subsystem for Android”&#xff08;简称WSA&#xff09;&#xff0c;即《安卓子系统》。他可…...

Python实现双向链表:从基础到应用

一、引言 双向链表是一种比单向链表更复杂的数据结构&#xff0c;每个节点除了包含数据和指向下一个节点的指针外&#xff0c;还包含一个指向前一个节点的指针。这种结构使得我们可以从链表的任何节点开始&#xff0c;向前或向后遍历链表。 目录 一、引言 二、节点定义 三、…...

c# 读取DataGridView中的数据

/// <summary> /// 读取DataGridView中的数据 /// </summary> /// <param name"dgv">DataGridView对象</param> /// <returns>DataTable对象</returns> private DataTable GetDgvToTab…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...