VUE----上传文件到OSS

需求：公司项目会产生大量的PDF文件，直接存在服务器上，导致几个月就得扩充一次磁盘，所以最终决定将文件扔到oss上去，避开服务器存储
原始方式：以前是前端将文件上传到后端，后端保存文件到本地，然后服务器将本地文件上传到oss，最后删除本地文件。
新方式：绕过后端，直接前端上传到oss，然后返回给后端oss文件路径

1.阿里云对象存储：

1.开通对象存储服务
2.新建bucket
3.设置跨域
我们知道前端存在跨域问题，所以我们即便是前端直接上传文件到oss，那么也必须解决跨域问题
阿里的文档多如牛毛，也许你前脚找到，后脚就不知道页面在哪了，这里我就直接截图：

选择跨域设置项 跨域设置项截图 设置样式 4.保存需求参数：

region :地区信息       #例如oss-cn-beijing
accessKeyId：账户标识
accessKeySecret：账户秘钥
bucket：你新建的bucket的名字

2.下载ali包：

npm install ali-oss --save

3.创建oss实例：

#在src/common/js文件夹下创建OssClient.js
import OSS from 'ali-oss'
const client = new OSS({
  region: '创建bucket的地区',
  accessKeyId: '账户标识',
  accessKeySecret: '账户秘钥',
  bucket: 'bucket的名字'
})
export default client

4.组件中使用：

#示例代码：
<template>
  <div>
    <el-upload
      action=""
      :http-request="Upload"
      :on-remove="delitem"
      list-type="picture-card" class="upload-demo">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>
    
<script>
  import client  from 'common/js/ossClient.js'
    export default {
    name:'Index',
    data() {
      return {
        url:[]
      }
    },
    methods:{
      //自定义上传方法..
      Upload(file) {
        //判断扩展名
          const tmpcnt = file.file.name.lastIndexOf(".")
          const exname = file.file.name.substring(tmpcnt + 1)
          const names = ['jpg', 'jpeg', 'webp', 'png','bmp']
          if(names.indexOf(exname)< 0 ){
            this.$message.error("不支持的格式!")
            return
          }
        const fileName =file.file.uid + '.' + exname
        client.put(fileName, file.file).then(res=>{
          if(res.url){
            this.url.push(res.url)
          }else{
            this.$message.error('文件上传失败')
          }
        }).catch(err=>{})
      },
      //删除一个图片..
        delitem(file, fileList){
          console.log(file.uid)
          for (let i = 0; i < this.url.length; i++) {
            if(this.url[i].indexOf(file.uid) > -1){
              this.url.splice(i, 1);
            }
          }
        }
    }
  }
</script>

<style scoped >
    .upload-demo /deep/ .el-upload--picture-card{
      height:100px;
      width:100px;
      line-height:100px;
    }
    .upload-demo /deep/ .el-upload-list__item{
      height:100px;
      width:100px;
      line-height:100px;
    }
</style>

5.更多设置：

更多的设置去看element ui文档https://element.eleme.cn/#/zh-CN/component/upload