·第一次尝试将图片以外链的形式存储到又拍云，将url保存到数据库，这样不管什么设备都可以读取得到图片，而且不用考虑vite打包时候的烦人的静态资源问题，这里将又拍云存储和前后端代码和思路记录了一下，方便日后参考。（这里调用的api都是完成这个工作最基本的，详细api请查看官网文档）

一. 创建一个又拍云的云存储服务

记得要实名认证才可以存哦
创建完成后可以查看已创建的服务

二. springboot后端编写

这里重点是展示几个重要接口，一些照片的预处理等等可以参考官网

1. 先导包

<dependency><groupId>com.upyun</groupId><artifactId>java-sdk</artifactId><version>4.1.3</version>
</dependency>

2. 直接写个controller演示

这样我们就得到了url地址，想返回前端或者在数据库中修改都是可以的

三. 前端elementPlus上传

从elementplus官网可以找到示例代码，在上面进行修改

说明：

我这里是将上传框封装为了一个组件
父组件需要传递currentImg（如果上传头像之前已经有头像的url了就预先显示的之前的头像url）
还有postUrl，就是要请求的后端地址
父组件中还有自定义事件getPicUrl，当前组件请求到了picUrl后就返回给父组件
父组件拿到了postUrl就可以进行各种操作了，增删改都可以
这里使用的request是已经封装好的axios请求
后端和前端这两块在官方文档中还有更多的api，这里只是介绍一个基础用法

四. 前端代码（这个是写成单独一个组件，不考虑复用性的演示案例）

封装的request

// 引入axios
import axios from 'axios';// 创建axios实例
const httpService = axios.create({// url前缀-'http:xxx.xxx'// baseURL: process.env.BASE_API, // 需自定义baseURL:'http://localhost:8082',// baseURL:'http://47.96.16.81:8082',// 请求超时时间timeout: 3000 // 需自定义
});//添加请求和响应拦截器
// 添加请求拦截器
httpService.interceptors.request.use(function (config:any) {// 在发送请求之前做些什么config.headers.token=window.sessionStorage.getItem('token');return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
httpService.interceptors.response.use(function (response) {// 对响应数据做点什么return response;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});/*网络请求部分*//**  get请求*  url:请求地址*  params:参数* */
export function get(url:string, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'get',params: params}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}/**  post请求*  url:请求地址*  params:参数* */
export function post(url:string, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params}).then(response => {console.log(response)resolve(response);}).catch(error => {console.log(error)reject(error);});});
}/**  文件上传*  url:请求地址*  params:参数* */
export function fileUpload(url:string, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params,headers: { 'Content-Type': 'multipart/form-data' }}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}export default {get,post,fileUpload
}

上传组件

<template><el-uploadclass="avatar-uploader":http-request="uploadAction":show-file-list="false":before-upload="beforeUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload>
</template><script lang="ts">
import {ref, defineComponent, reactive} from 'vue'
import { ElMessage } from 'element-plus'
import Request from "@/utils/request";
import type { UploadRawFile,} from 'element-plus';
export default defineComponent({setup(props,cxt){const imageUrl = ref()// 上传的函数const uploadAction = (option: any) => {let param = new FormData();param.append('file', option.file);Request.post(props.postUrl,param).then((res) => {console.log(res.data.picUrl)imageUrl.value=res.data.picUrl})}const beforeUpload = (file: UploadRawFile) => {const type = ['image/jpeg', 'image/jpg', 'image/png']if (type.indexOf(file.type) === -1) {ElMessage.error('上传的文件必须是JPG、JPEG、PNG三种之一!')return false} else if (file.size / 1024 / 1024 > 2) {ElMessage.error('图片大小不能超过2MB!')return false}return true}return{imageUrl,uploadAction,beforeUpload}}
})</script><style scoped>
.avatar-uploader .avatar {width: 178px;height: 178px;display: block;
}
</style><style>
.avatar-uploader .el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);
}.avatar-uploader .el-upload:hover {border-color: var(--el-color-primary);
}.el-icon.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;text-align: center;
}
</style>

文章目录

一. 创建一个又拍云的云存储服务
二. springboot后端编写
- 1. 先导包
- 2. 直接写个controller演示
三. 前端elementPlus上传
- 说明：
四. 前端代码（这个是写成单独一个组件，不考虑复用性的演示案例）
- 封装的request
- 上传组件

又拍云+springboot+element实现头像上传并将外链地址存到数据库相关推荐

element 实现头像上传
用element 实现头像上传,并且可以更换图片,我通过组件封装,加自定义v-model来实现上传前: 上传后: 1.在页面中引入图片上传组件 <el-form-item label=&quo ...
PHP上传图片文件到又拍云，如何把文件上传到又拍云
PHP上传图片文件到又拍云,如何把文件上传到又拍云: https://www.tpxhm.com/adetail/593.html
保姆级别SpringBoot接入又拍云实现表单文件上传手册
一.背景本来打算使用七牛云进行文件上传的,由于自己一直没有实名认证(需要上传手持身份证就很烦),导致现在想用的时候用不了.另外自己所在的公司用的是又拍云,就试着看看又拍云能不能用,结果就有了这篇文章 ...
云服务器网站不能够上传视频,网站的视频要存到云服务器上吗
网站的视频要存到云服务器上吗内容精选换一换云服务器怎么选?云服务购买选择的时候主要根据以下方面来确定:服务器区域.宽带.核心数.线路.处理器.业务应用场景等方面来综合考虑.对于个人或者中小企业来 ...
如何用七牛云上传音乐生成外链
收费的,不推荐使用,可以使用又拍云储存+CDN,再去申请又拍云联盟,一个月10g储存空间+15g流量,基本够用了 1.注册七牛云 2.新建对象储存 3.绑定自己的cdn域名必须要备过案的域名免费提 ...
使用 flickr API 上传并获取外链
这两天写一个python的自动从word读取并向OJ的DIY添加题目的脚本,其中一个最痛苦的地方莫过于图片添加了.没被墙并且以前用过的图床只有flickr,第一次用API的方式写代码,一切都从零开始. ...
Vue+SpringBoot+OSS+element实现图片上传服务器+图片展示墙
1.技术选型: (1)Vue(前端) (2)Element(上传图片组件) (3)SpringBoot(后端) (4)Mybatis(数据库操作) (3)OSS(阿里云存储服务器) 2.实现效果概述: ...
SpringBoot + Vue 头像上传案例
头像上传前言后台系统一般会有用户个人信息的模块,为了增强用户的体验度,系统会开放自定义头像的功能,让用户可以上传自定义图片替代默认的系统头像.本文将通过SpringBoot+Vue来具体实现. 前 ...
微信头像下载并上传到阿里云OSS，PHP文件上传到阿里云OSS简单代码（OSS文件上传，微信头像下载，CURL下载文件，微信头像链接过期）
(就这么个小事,有多少公司多少项目没做到!!) 微信公众号项目,后端获取到授权用户的微信头像后,要自行下载保存,不下载的话,微信返回的头像链接会在一段时间后过期,无法访问! 下面是我写的两个简单实用方 ...

又拍云+springboot+element实现头像上传并将外链地址存到数据库

一. 创建一个又拍云的云存储服务

二. springboot后端编写

1. 先导包

2. 直接写个controller演示

三. 前端elementPlus上传

说明：

四. 前端代码（这个是写成单独一个组件，不考虑复用性的演示案例）

封装的request

上传组件

文章目录

又拍云+springboot+element实现头像上传并将外链地址存到数据库相关推荐

最新文章

热门文章