当前位置: 首页 > 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…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...