VUE----上傳文件到OSS

需求：公司項(xiàng)目會(huì)產(chǎn)生大量的PDF文件事格，直接存在服務(wù)器上介粘，導(dǎo)致幾個(gè)月就得擴(kuò)充一次磁盤，所以最終決定將文件扔到oss上去伊脓，避開服務(wù)器存儲(chǔ)
原始方式：以前是前端將文件上傳到后端，后端保存文件到本地魁衙，然后服務(wù)器將本地文件上傳到oss，最后刪除本地文件株搔。
新方式：繞過后端剖淀，直接前端上傳到oss，然后返回給后端oss文件路徑

1.阿里云對象存儲(chǔ)：

1.開通對象存儲(chǔ)服務(wù)
2.新建bucket
3.設(shè)置跨域
我們知道前端存在跨域問題纤房，所以我們即便是前端直接上傳文件到oss纵隔，那么也必須解決跨域問題
阿里的文檔多如牛毛，也許你前腳找到炮姨，后腳就不知道頁面在哪了捌刮，這里我就直接截圖：

選擇跨域設(shè)置項(xiàng)

跨域設(shè)置項(xiàng)截圖

設(shè)置樣式

4.保存需求參數(shù)：

region :地區(qū)信息       #例如oss-cn-beijing
accessKeyId：賬戶標(biāo)識
accessKeySecret：賬戶秘鑰
bucket：你新建的bucket的名字

2.下載ali包：

npm install ali-oss --save

3.創(chuàng)建oss實(shí)例：

#在src/common/js文件夾下創(chuàng)建OssClient.js
import OSS from 'ali-oss'
const client = new OSS({
  region: '創(chuàng)建bucket的地區(qū)',
  accessKeyId: '賬戶標(biāo)識',
  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) {
        //判斷擴(kuò)展名
          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=>{})
      },
      //刪除一個(gè)圖片..
        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.更多設(shè)置：

更多的設(shè)置去看element ui文檔https://element.eleme.cn/#/zh-CN/component/upload

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者