基于Vue和ElementUI上传文件到阿里云OSS对象存储中

奋斗吧
奋斗吧
擅长邻域：未填写

标签： 基于Vue和ElementUI上传文件到阿里云OSS对象存储中 Html/CSS博客 51CTO博客

2023-07-14 18:24:15 156浏览

基于Vue和ElementUI上传文件到阿里云OSS对象存储中，前言OSS（OpenStorageService）开放云存储服务，是阿里云对外的提供的海量，安全和高可靠的云存储服务。目前阿里的所有云服务


前言

OSS（Open Storage Service）开放云存储服务，是阿里云对外的提供的海量，安全和高可靠的云存储服务。目前阿里的所有云服务都是收费

OSS，通俗一点理解就像是一块硬盘用来存储东西呢，只不过，它是由很多服务器，通过类似负载均衡，raid等各种技术，搭建起来的云存储，类似我们经常使用的百度云盘，360云盘等。我们可以将我们服务，数据存放上去，方便，安全，实现云。好了，简单来说，OSS，既然是存储东西用的，我们就需要学会像类似IO流对电脑硬盘操作一样，学习一下对OSS云存储的上传，删除等操作。

首先是开通OSS服务器后，会有endpoint，跟地址；accessKeyId，类似用户名；accessKeySecret,类似密码；buketName:第一层文件夹的名字，一个用户可以创建十个bucketName,类似于我们的C,D,E,F盘符；accessUrl,很明显用户可以通过浏览器访问的地址。例如我们上传一个html文件，我们就可以通过"accessUrl/bucketName/目录/文件名.html，来进行访问。我在这里负责一个是页面静态化的功能，将动态的JSP页面生成静态的html页面，然后上传的OSS服务器，返回地址，让用户直接访问静态页面，这样就大大加快访问的速度。 这里突然想到一点不沾边的话语“物极必反，否极泰来”，最开始是单纯的静态页面，我们一直追求动态页面，现在又需要转会到静态页面，各有各的好处，所以技术这东西，没有一个好与不好，只是针对方面不同而已了。

一、配置OSS

1、首先要开通阿里云对象存储功能
请参照官网说明 https://help.aliyun.com/document_detail/31884.html

2、创建Bucker

基于Vue和ElementUI上传文件到阿里云OSS对象存储中_上传

3、创建用户

基于Vue和ElementUI上传文件到阿里云OSS对象存储中_ci_02

4、设置跨域：
操作步骤

  1. 进入 OSS 管理控制台 界面。
  2. 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。
  3. 单击 基础设置 页签，找到 跨域设置 区域，然后单击 设置。
  4. 单击 创建规则，打开 设定跨域规则 对话框。
  5. 设置跨域规则。

二、使用Vue构建上传页面

1、构建项目，添加如下三个文件

基于Vue和ElementUI上传文件到阿里云OSS对象存储中_上传_03


2、单文件上传singleUpload.vue内容

<template> 
  <div>
    <el-upload
      action="http://**.oss-cn-beijing.aliyuncs.com"
      :data="dataObj"
      list-type="picture"
      :multiple="false" :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="">
    </el-dialog>
  </div>
</template>
<script>
   import {policy} from './policy'
   import { getUUID } from '@/utils'

  export default {
    name: 'singleUpload',
    props: {
      value: String
    },
    computed: {
      imageUrl() {
        return this.value;
      },
      imageName() {
        if (this.value != null && this.value !== '') {
          return this.value.substr(this.value.lastIndexOf("/") + 1);
        } else {
          return null;
        }
      },
      fileList() {
        return [{
          name: this.imageName,
          url: this.imageUrl
        }]
      },
      showFileList: {
        get: function () {
          return this.value !== null && this.value !== ''&& this.value!==undefined;
        },
        set: function (newValue) {
        }
      }
    },
    data() {
      return {
        dataObj: {
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: '',
          // callback:'',
        },
        dialogVisible: false
      };
    },
    methods: {
      emitInput(val) {
        this.$emit('input', val)
      },
      handleRemove(file, fileList) {
        this.emitInput('');
      },
      handlePreview(file) {
        this.dialogVisible = true;
      },
      beforeUpload(file) {
        let _self = this;
        return new Promise((resolve, reject) => {
          policy().then(response => {
            console.log("响应的数据",response);
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key = response.data.dir +getUUID()+'_${filename}';
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            console.log("响应的数据222。。。",_self.dataObj);
            resolve(true)
          }).catch(err => {
            reject(false)
          })
        })
      },
      handleUploadSuccess(res, file) {
        console.log("上传成功...")
        this.showFileList = true;
        this.fileList.pop();
        this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });
        this.emitInput(this.fileList[0].url);
      }
    }
  }
</script>
<style>

</style>

3、发送请求函数policy.js

import http from '@/utils/httpRequest.js'
export function policy() {
   return  new Promise((resolve,reject)=>{
        http({
            url: http.adornUrl("/service/oss/policy"),
            method: "get",
            params: http.adornParams({})
        }).then(({ data }) => {
            resolve(data);
        })
    });
}

4、http请求httpRequest.js

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import { clearLoginInfo } from '@/utils'

const http = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})

/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
  return config
}, error => {
  return Promise.reject(error)
})

/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
  if (response.data && response.data.code === 401) { // 401, token失效
    clearLoginInfo()
    router.push({ name: 'login' })
  }
  return response
}, error => {
  return Promise.reject(error)
})

/**
 * 请求地址处理
 * @param {*} actionName action方法名称
 */
http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + '/api' + actionName
}

/**
 * get请求参数处理
 * @param {*} params 参数对象
 * @param {*} openDefultParams 是否开启默认参数?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}

/**
 * post请求数据处理
 * @param {*} data 数据对象
 * @param {*} openDefultdata 是否开启默认数据?
 * @param {*} contentType 数据格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

export default http

5、单文件上传singleUpload.vue组件使用

定义组件

基于Vue和ElementUI上传文件到阿里云OSS对象存储中_spring_04


使用组件

基于Vue和ElementUI上传文件到阿里云OSS对象存储中_spring_05

三、后台上传编写

1、引入阿里云oss支持

<dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>aliyun-oss-spring-boot-starter</artifactId>
        </dependency>
 <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring-cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>

            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>2.2.5.RELEASE</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>aliyun-spring-boot-dependencies</artifactId>
                <version>1.0.0</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

2、在application.yml中配置

alibaba:
  cloud:
    access-key: LTAI5tJbfYNXqfG3tu6io2JH22
    secret-key: lAraWT3r8E43RUBcIj7q82NFWWQhz29n
    oss:
      endpoint: oss-cn-beijing.aliyuncs.com
      bucket: wysmall

3、在控制层编写函数

@RestController
@Slf4j
public class OssController {

    @Autowired
    private OSS ossClient;
    @Value("${alibaba.cloud.oss.endpoint}")
    private String endpoint;
    @Value("${alibaba.cloud.oss.bucket}")
    private String bucket;
    @Value("${alibaba.cloud.access-key}")
    private String accessId;

    @GetMapping("/oss/policy")
    public R policy() {
        try {
            Map<String, String> data = OssUtil.doGet(ossClient, endpoint, bucket, accessId);
            return R.ok().put("data", data);
        } catch (Exception e) {
            throw new RRException(e.getMessage());
        }
    }
}

public class OssUtil {

    public static Map<String, String> doGet(OSS ossClient, String endpoint, String bucket, String accessId) throws ServletException, IOException {
        String host = "https://" + bucket + "." + endpoint;
//        String callbackUrl = "http://88.88.88.88:8888";
        String dir = new SimpleDateFormat("yyyy-MM-dd").format(new Date()) + "/";
        // 创建OSSClient实例。
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            Map<String, String> respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            return respMap;
        } catch (Exception e) {
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        return null;
    }

四、最后效果图：

基于Vue和ElementUI上传文件到阿里云OSS对象存储中_上传_06


好博客就要一起分享哦！分享海报

此处可发布评论

评论（0）展开评论

暂无评论，快来写一下吧

展开评论

您可能感兴趣的博客

第三次课-阿里云对象存储

第二次课-讲师功能-对象存储-easyExcel

第四次课：阿里云视频点播

第五次课-阿里云视频点播技术

购买配置阿里云服务器

no15-第十一章第二次课-springmvc的单文件和多文件上传-rest风格

struts2图片上传文件为空

第十次课：存储过程删课程-若依框架改造

掌上游戏app第三次课-新增app基本信息-上传文件

vue多图片上传，照片墙，vue图片上传添加headers参数

springboot文件上传-springsecurity白名单-资源虚拟路径映射

vue里结合QuillEditor写富文本编辑器-含图片粘贴上传服务器

Java个人家乡前台和个人中心功能文档技术文档

js数组对象排序

上传组件设置请求头

3.elementUI学习

springboot设置文件上传大小

导出excel文件或者下载文件采用blob文件流的形式

安装vue设置缓存文件夹报错

基于微信小程序的校园失物招领系统毕业论文

no12-springboot高并发第一次课-spring缓存和redis

客服QQ 1913284695