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

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

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

为什么使用对象存储OSS

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

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

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

什么是对象存储OSS

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

在项目中使用

安装 ali-oss第三方库

npm install ali-oss --save
or
yarn add ali-oss

在项目中新建一个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"
};

在组件中使用

<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>