德州网站建设德州,建盏生态公司,怎样把域名和做的网站连接不上,长春市星宿科技网站建设公司怎么样前提oss准备工作 进入阿里云官网#xff1a;阿里云oss官网 注册 搜OSS#xff0c;点击“对象存储OSS” 第一次进入需要开通#xff0c;直接点击立即开通#xff0c;到右上角AccessKey管理中创建AccessKey#xff0c;并且记住自己的accessKeyId和accessKeySecret#…前提oss准备工作 进入阿里云官网阿里云oss官网 注册 搜OSS点击“对象存储OSS” 第一次进入需要开通直接点击立即开通到右上角AccessKey管理中创建AccessKey并且记住自己的accessKeyId和accessKeySecret因为之后要用到如果现在不记之后就会被隐藏 点击右上角进入自己账号主页鼠标移到左上角三条杠会有侧边栏弹出找到对象存储OSS开通后创建Bucket。名称和地域自己填写和选择其他默认不变读写权限为“公共读”其余默认即可 添加依赖
阿里云的oss依赖
dependencygroupIdcom.aliyun.oss/groupIdartifactIdaliyun-sdk-oss/artifactIdversion3.15.1/version
/dependencyAliOSS工具类
package com.wedu.modules.tain.utils;import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;/*** 阿里云 OSS 工具类*/
Data
ConfigurationProperties(prefix aliyun3.oss)
Component
public class AliOSSUtil {// 这些成员变量等会在配置项中设置private String endpoint;private String accessKeyId;private String accessKeySecret;private String bucketName;/*** 实现上传图片到OSS*/public String upload(MultipartFile file) throws IOException {// 获取上传的文件的输入流InputStream inputStream file.getInputStream();// 避免文件覆盖一面文件重名时上传失败String originalFilename file.getOriginalFilename();String fileName UUID.randomUUID().toString() originalFilename.substring(originalFilename.lastIndexOf(.));//上传文件到 OSSOSS ossClient new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);ossClient.putObject(bucketName, fileName, inputStream);//文件访问路径String url endpoint.split(//)[0] // bucketName . endpoint.split(//)[1] / fileName;// 关闭ossClientossClient.shutdown();return url;// 把上传到oss的路径返回}}controller类接收请求返回文件路径 Autowiredprivate AliOSSUtil aliOSSUtil;//ossPostMapping(/ossUpload)public R ossUpload(MultipartFile file) throws IOException {String url aliOSSUtil.upload(file); // 返回文件的上传路径访问这个url即可下载return R.ok().put(url,url);}更新application.yml配置
# 阿里云OSS配置 wyj配置
aliyun3:oss:endpoint: http://见下文解说accessKeyId: 自己的KeyIdaccessKeySecret: 自己的KeySecretbucketName: 创建的bucket的名称外网访问的那个东东复制在http:后面就行
postman测试
测试成功 列表里也有刚刚上传的数据
vue
首先在页面上写一个文件上传按钮点击则弹出弹窗弹窗内再继续写文件上传
templatedivel-form :inlinetrueel-form-itemel-buttontypeprimaryclickfileUpload()文件上传/el-button/el-form-item/el-formfile-upload v-iffileUploadVisible refFileUpload/file-upload/div/templatescriptimport FileUpload from ./warn-file-upload;export default {data() {return {fileUploadVisible:false};},components: {FileUpload,},methods: {fileUpload(){this.fileUploadVisible true;this.$nextTick(() {this.$refs.FileUpload.init();});},},};/scriptstyle/style弹窗内写一个下拉选择框后续还会写本地存储以及minio
templateel-dialogtitle文件传输:visible.syncvisible:close-on-click-modalfalseel-select v-modelvalue placeholder请选择存储方式el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectel-uploadclassupload-demodrag:actiongetUploadAction(this.value):headerstokenInfomultiple:disabled!this.valuei classel-icon-upload/idiv classel-upload__text将文件拖到此处或em点击上传/em/divdiv classel-upload__tip slottip请先选择上传方式再进行文件上传/div/el-upload/el-dialog/templatescriptexport default {data() {return {ossUpload: this.$http.adornUrl(/tain/warn/ossUpload),tokenInfo: {token: this.$cookie.get(token),},visible: true,options: [{value: 1,label: 本地存储,},],value: ,};},methods: {init() {this.visible true;this.$nextTick(() {this.value ;});},getUploadAction(value) {if (value 1) {return this.ossUpload;} else if (value ) {return this.value;}},},};/scriptstyle/style
