因為公司的服務器比較拉吧，所以老大決定將數(shù)據(jù)文件等上傳到阿里云服務器，通過ali-oss方式，這樣的話讀取文件也比較快?

（能看到這說明什么安裝element-ui都會了，我就不詳細介紹了，直接跳過）?

在執(zhí)行下面操作之前，你要確定你的阿里云能看到上邊這個頁面?

?這里主要是配置讀寫，只有設置成公共讀寫，才可以前端直接上傳，不需要跟后端要什么token了

一、安裝 npm i? --save ali-oss

（1）.在vue-clic中新建tools.js文件，（此文件主要是封裝方法）

let OSS = require('ali-oss')

let client = new OSS({
  region: 'oss-cn-beijing',    //創(chuàng)建的時候，bucket所在的區(qū)域，華北2->oss-cn-beijing ；其他的可以去百度
  accessKeyId: 'wefwefwfwfwfwfwdwd2d32dw',// 阿里云控制臺創(chuàng)建的AccessKey
  accessKeySecret: '123dwdw1e12e2e2d2fwefw', //阿里云控制臺創(chuàng)建的AccessSecret
  bucket: 'xxxxx'  //創(chuàng)建的bucket的名稱
})

export const put = async (ObjName, fileUrl) => {  
  try {    
    let result = await client.put(`${ObjName}`, fileUrl)    
    // ObjName為文件名字,可以只寫名字，就直接儲存在 bucket 的根路徑，如需放在文件夾下面直接在文件名前面加上文件夾名稱    
    return result  
  } catch (e) {    
   console.log(e)  
  }
}

// 上傳成功之后，轉(zhuǎn)換真實的地址
export const signatureUrl= async (ObjName) => {    
  try {        
    let result = await client.signatureUrl(`${ObjName}`)    
    return result  
  } catch (e) {    
    console.log(e)  
  }
}

export const getFileNameUUID = () => {  
  function rx() {    
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)  
  }  
  return `${+new Date()}_${rx()}${rx()}`
}

(2)在.vue中寫入一下代碼，有注釋，細心的話可以看懂（我只是演示，所以放到了app.vue文件中了）

<template>
  <div id="app">
    <el-upload
      class="upload-demo"
      ref="upload"
      action="#"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :beforeUpload="beforeUpload"
      :file-list="fileList"
      :http-request="handleUpload"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
      <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
    </el-upload>
  </div>
</template>

<script>

import { put, signatureUrl, getFileNameUUID } from './tools'
export default {
  name: 'App',
  data(){
    return {
      fileList:[]
    }
  },
  methods: {
    getFileName(name){
      return  name.substring(name.lastIndexOf("."));//.txt
    },
    beforeUpload(file) {      
      // 限制上傳類型      
      const fileExtensions = this.getFileName(file.name) === '.doc' || this.getFileName(file.name) === '.docx' || this.getFileName(file.name) ==='.pdf'      
      //限制的上限為20M      
      const max20M = file.size / 1024 / 1024 < 20;      
      if (!fileExtensions) {        
        this.$message.error('上傳文件類型只能是 .doc, .docx, .pdf 格式!');      
      }      
      if (!max20M) {        
        this.$message.error('上傳文件大小不能超過 20MB!');      
      }      
      return fileExtensions && max20M;    
    },
    handleUpload(option) {
      // 獲取文件的后綴名
      // let objName = getFileNameUUID()
      var obj = option.file.name
      var index = obj.lastIndexOf(".");      
      obj = obj.substring(index,obj.length);
      // 生成的文件名，保留文件后綴名，進行拼接      
      let objName = getFileNameUUID() + this.getFileName(option.file.name)

      // 調(diào)用 ali-oss 中的方法,flieName是存放的文件夾名稱，可自己定義
      put(`flieName/${objName}`, option.file).then(res => {        
        console.log(res,'res')
        // 上傳成功之后，轉(zhuǎn)換真實的地址
        signatureUrl(`flieName/${objName}`).then(res => {          
            console.log(res)        
        })
      })
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

（3）運行一下試試，咦，是不是報跨域問題了？沒有恭喜你成功了，出現(xiàn)的小伙伴也不要著急，請看下圖

?按上圖配置，八九不離十，直接成功！

二、跑起來之后，我老大跟我提了個需求就是，把阿里云里面現(xiàn)有的文件url整體的提取出來，于是乎，我便開始瘋狂查閱文檔，最終找到了這個基于nodejs的寶藏腳本，代碼如下：

const OSS = require('ali-oss');


//這里的配置和上傳的配置保持一致，畢竟只是為了查詢當前阿里云已存的所有文件url
const client = new OSS({
  accessKeyId: 'wefhwuifhweifhwefhwiof',  
  accessKeySecret: 'wefhwfwefwfwefewgretg',
  bucket: 'wefwfw',
  region: 'oss-cn-beijing',
});

let urls = []
async function list () {
  // 不帶任何參數(shù)，默認最多返回100個文件。
  const result = await client.list();
  // console.log(result.objects.url);
  for(let i = 0;i < result.objects.length ;i++){
    let url = result.objects[i].url
    urls.push(url)
  }
  console.log(urls)
}

list();

OK了，本篇文章的有價值信息就這些，不為別的，只為了記錄自己的經(jīng)歷，不斷學習，不斷進步！文章來源地址http://www.zghlxwxcb.cn/news/detail-496901.html

到了這里，關(guān)于vue前端直接使用element-ui的upload組件上傳到阿里云OSS存儲的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！