vue 文件上传至服务器_oss文件服务器

vue 文件上传至服务器_oss文件服务器为什么使用对象存储OSS很多企业的文件上传下载都是通过文件流的形式进行上传下载的,需要后端配合,对服务器压力很大,而且高消费,对公司损失太大,我们选择使用oss将尽可能地缩小成本,以及对网站及逆行大幅度提升使用对象存储OSS改变了什么网站数据动静分离,大幅提升网页性能 单独的文件管理界面,管理网站文件和本地电脑一样高效率方便使用 成本低,资源弹性伸缩,按需付费什么是对象存储OSS阿里云对象存储OSS(ObjectStorageService)是一款海量、安全、低成本、高可靠的云存储

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

为什么使用对象存储OSS

很多企业的文件上传下载都是通过文件流的形式进行上传下载的,需要后端配合,对服务器压力很大,而且高消费,对公司损失太大,我们选择使用oss将尽可能地缩小成本,以及对网站及逆行大幅度提升

使用对象存储OSS改变了什么

  1. 网站数据动静分离,大幅提升网页性能
  2. 单独的文件管理界面,管理网站文件和本地电脑一样高效率方便使用
  3. 成本低,资源弹性伸缩,按需付费

什么是对象存储OSS

阿里云对象存储OSS(Object Storage Service)是一款海量、安全、低成本、高可靠的云存储服务,可提供99.9999999999%(12个9)的数据持久性,99.995%的数据可用性。多种存储类型供选择,全面优化存储成本。

在项目中使用

  1. 安装 ali-oss第三方库

    npm install ali-oss --save
    or
    yarn add ali-oss
  2.  在项目中新建一个oss.js文件(用于放置我们的配置项)

    import OSS from 'ali-oss'
    // or
    // const OSS = require('ali-oss')
    
    export const client = new OSS({
        region: 'oss-cn-hangzhou', // oss地址
        accessKeyId: 'xxxxxxxxxxx', // 通过阿里云控制台创建的AccessKey ID。
        accessKeySecret: 'xxxxxxxxxxx', // 通过阿里云控制台创建的AccessKey Secret。
        bucket: 'xxxxxxxxxxx', // 仓库名字
        useFetch: true, // 支持上传大于100KB的文件
        secure:true // 返回的url为https
    })
    
    export const headers = {
        // 指定该Object被下载时网页的缓存行为。
        "Cache-Control": "no-cache",
        // 指定该Object被下载时的名称。
        "Content-Disposition": "inline",
        // 指定该Object被下载时的内容编码格式。
        "Content-Encoding": "UTF-8",
        // 指定过期时间。
        Expires: "Wed, 08 Jul 2023 16:57:01 GMT",
        // 指定Object的存储类型。
        "x-oss-storage-class": "Standard",
        // 指定Object的访问权限。
        // "x-oss-object-acl": "private",
        // 设置Object的标签,可同时设置多个标签。
        "x-oss-tagging": "Tag1=1&Tag2=2",
        // 指定CopyObject操作时是否覆盖同名目标Object。此处设置为true,表示禁止覆盖同名Object。
        "x-oss-forbid-overwrite": "true",
        // "secure": "true"
    };
  3.  在组件中使用

    <template>
      <div class="upload">
        <el-upload ref="upload" style="display: inline-block;" action="" :limit="1" :http-request="httpRequest"
          :on-remove="handleRemove" :on-change="onChange" :before-upload="beforeAvatarUpload"
          :on-success="handleUploadSuccess" :file-list="fileList">
          <el-button type="info" size="mini">点击上传</el-button>
        </el-upload>
      </div>
    </template>
    
    <script>
    export default {
        data(){
        return {
            fileList: [],
            url: ''
        }
      },
         methods: {
            onChange(file, fileList) {
              console.log(file, 'file', fileList, 'Filest');
              this.fileList = fileList
            },
            handleUploadSuccess(response, file, fileList) {
              console.log(response, file, fileList, 'response, file, fileList')
            },
            handleRemove(e, fileList) {
              this.fileList = fileList;
            },
            beforeAvatarUpload(file) {
              // 文件大小校验
              const isLt2M = file.size / 1024 / 1024 < 10;
              if (!isLt2M) {
                this.$message.error('文件大小不能超过 10M !');
              }
              return isLt2M;
            },
            httpRequest(file) {//阿里云OSS上传
              //判断扩展名
              const tmpcnt = file.file.name.lastIndexOf(".") // 获取.的下标
              const uploadFileName = file.file.name.substring(0, tmpcnt) // 获取文件名
              console.log(uploadFileName, '文件名——uploadFileName');
              const exname = file.file.name.substring(tmpcnt + 1) // 获取后缀名
              console.log(exname, '后缀名');
              const names = ['jpg', 'jpeg', 'webp', 'png', 'bmp', 'exe', 'yml']
              if (names.indexOf(exname) < 0) {
                this.$message.error("不支持的格式!")
                return false
              }
              const fileName = uploadFileName
              console.log(fileName, '文件名');
              client.put(
                fileName,
                file.file,
                {
                  headers
                },
              ).then(res => {
                console.log(res, 'res---header ');
                // this.handleUploadSuccess()
                //   if (res.url) {
                //     this.url.push(res.url)
                //   } else {
                //     this.$message.error('文件上传失败')
                //   }
              }).catch(err => {
                console.log(err, 'err');
              })
        }
      }
    }
    </script>
    
    
  4.  上传成功,返回一个对象里边包含上传成功的url和上传的文件名vue 文件上传至服务器_oss文件服务器

  5.  上传完毕

注意点:

  1. 本地上传oss是http,服务器是https的就会出现问题,需要在oss.js文件里边配置,配置完之后在上传一下,就能看到返回的url是https
    secure:true // 返回的url为https
  2.  跨域之类的问题让运维配置下就可以了

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170642.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • cglib动态代理实现原理_动态代理的两种方式

    cglib动态代理实现原理_动态代理的两种方式CGLib动态代理原理CGLib动态代理是代理类去继承目标类,然后重写其中目标类的方法啊,这样也可以保证代理类拥有目标类的同名方法;看一下CGLib的基本结构,下图所示,代理类去继承目标类,每次调用代理类的方法都会被方法拦截器拦截,在拦截器中才是调用目标类的该方法的逻辑,结构还是一目了然的;1.CGLib的基本使用使用一下CGLib,在JDK动态代理中提供一个Proxy类来创建代理类,而在CGLib动态代理中也提供了一个类似的类Enhancer;使用的CGLib版本是2.2.2,我是随便找的,不

  • 图像质量评价方法PSNR+SSIM&&评估指标SROCC,PLCC

    图像质量评价方法PSNR+SSIM&&评估指标SROCC,PLCCupdate:2018-04-07今天发现ssim的计算里面有高斯模糊,为了快速计算,先对每个小块进行计算,然后计算所有块的平均值。可以参考源代码实现,而且代码实现有近似的在里面!matlab中中图

  • 获取手机实际分辨率的软件_电脑怎么调整照片分辨率

    获取手机实际分辨率的软件_电脑怎么调整照片分辨率1.这个是获取手机分辨率但是不包括状态栏和浸入式底部导航栏DisplayMetricsdm=newDisplayMetrics();context.getWindowManager().getDefaultDisplay().getMetrics(dm);return+dm.widthPixels+"*"+dm.heightPixels; 2.获取手机实际分…

  • navicat连接oracle数据库失败_mysql数据库连接失败

    navicat连接oracle数据库失败_mysql数据库连接失败1、Navicat连接数据库失败,可能与密码、权限有关。报警内容:1251-Clientdoesnotsupportauthenticationprotocolrequestedbyserver;considerupgradingMySQLclient。解决办法:mysql-uroot-p,打开数据库,输入如下两条命令,问题解决。ALTERUSER’root’@’localhost’IDENTIFIEDWITHmysql_native_passwordBY’密码’;

    2022年10月10日
  • Eclipse安装android插件

    Eclipse安装android插件1.安装ADT:help中的Installnewsoftware中addadt:https://dl-ssl.google.com/android/eclipse/2.安装好SDK,建立虚拟机3.window–preferences–android中选取配置SDK4。编译android项目,runas中选择android项目

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号