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

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和上传的文件名

5.  上传完毕

注意点：

1. 本地上传oss是http,服务器是https的就会出现问题，需要在oss.js文件里边配置，配置完之后在上传一下，就能看到返回的url是https

   secure:true // 返回的url为https

2.  跨域之类的问题让运维配置下就可以了