vue專案中上傳檔案到阿里雲oss方法結合element ui 中的 el-upload

阿新 • • 發佈：2022-12-07

在專案需求中，關於圖片、視訊、檔案等上傳檔案，一般不是直接放置在自己的後臺伺服器上，一般都會購買雲服務進行儲存。譬如阿里雲的oss物件儲存。

前端開發專案中，涉及到上傳的功能時，我們不是把檔案上傳到自己的後臺伺服器，而是阿里雲上面去，然後拿到檔案的訪問地址，例如圖片的地址，再傳遞給後臺儲存下來，儲存的是一個阿里雲端儲存地址。

官方文件上說了：（阿里雲oss文件地址：https://help.aliyun.com/document_detail/112718.html）
1、使用阿里雲上傳的SDK來上傳到阿里雲oss
2、不使用sdk的方式，直接使用post表單提交到阿里雲oss去
3、小程式（忽略）

其實，也就兩種。要麼使用阿里雲給的sdk，他封裝的上傳方法等；要麼使用表單提交，像提交到我們自己伺服器一樣。

阿里雲oss SDK上傳: https://help.aliyun.com/document_detail/64047.htm?spm=a2c4g.11186623.0.0.119f3967Xq1Eb8#concept-64047-zh

這種方式，需要安裝依賴包或引入js檔案: npm install ali-oss

新建oss.js檔案，封裝一下：

const OSS = require('ali-oss')
export  
default {
/**
 * 阿里雲oss sdk檔案上傳
  dir 上傳到的檔案位置
 * @param {*} file 檔案流
 * @param {*} successCallback 成功回撥
 * @param {*} errCallBack 失敗回撥
 * @param {*} bucketName 阿里雲桶名（可以指定多個桶名）
 * @param {*} dir 上傳資料夾路徑  譬如images
 */

 bucketUpload(file, successCallback = new Function(), errCallBack = new Function(), bucketName = ' 
zzl-filerepostorypublic', dir = 'image') {
  let fileName = file.name// 先獲取上傳要的資料簽名
  req.getUploadVoucher().then((res) => {
    if (res.code === 0) {
      let obj = res.result.filePath.credentials || {}
      let config = {}
      config.host = obj.OssUrl
      // 例項化一個上傳客戶端
      const client = new OSS({
        // yourRegion填寫Bucket所在地域。Region填寫為oss-cn-hangzhou。
        // region: "oss-cn-beijing", //我的儲存是北京，可根據具體配置自行修改
        region: 'oss-cn-shanghai',
        // 從STS服務獲取的臨時訪問金鑰（AccessKey ID和AccessKey Secret）。）（後臺介面返回）
        accessKeyId: obj.accessKeyId,
        accessKeySecret: obj.accessKeySecret,
        // 從STS服務獲取的安全令牌（SecurityToken）。
        stsToken: obj.securityToken,
        // 填寫Bucket名稱。
        bucket: 'zzl-filerepostorypublic',
        endpoint:"https://oss-cn-shanghai.aliyuncs.com"
      })

      try {// 為保證唯一性，可以通過uuid將檔名替換
        // let uuid = uuidv4() + fileName.substring(fileName.lastIndexOf('.'))if (dir.substring(dir.length - 1, 1) !== '/') {
          dir += '/'
        }const result = client.put(dir + fileName, file)
        result
          .then(res => {
            console.log(res,"返回檔名和檔案地址")
            let size = file.size > 1000000 ? parseFloat(file.size / 1000000).toFixed(2) + 'M' : parseFloat(file.size / 1000).toFixed(2) + 'KB'
            successCallback({
              attachment: fileName,
              aliyunAddress: res.url,
              size: size,
              host: config.host
            })
          })
          .catch(err => {
            errCallBack(err)
          })
      } catch (e) {
        console.log(e)
      }
    } else {
      // _this.$message.warning(res.msg);
    }
  });
}
}

vue 頁面的程式碼：

 <el-upload
            class="upload-demo"
            :file-list="fileList1"
            action=""
            :http-request="handleUpload"
            :on-success="handleZipSuccess"
          >
            <el-button size="small" type="primary">點選上傳</el-button>
            <div slot="tip" class="el-upload__tip">
              支援副檔名：.ppt、.pdf、.zip、.doc、.docx
            </div>
 </el-upload>

import common from './oss'


 //手動上傳的方法  
    handleUpload(op) {
      let bucketName = 'zzl-filerepostorypublic'; // 桶名
      let dir = `images`;
      common.bucketUpload(
        op.file,
        (res) => {
          let temp = {
            name: res.attachment,
            url: res.aliyunAddress
          };
          this.host = res.host;
          op.onSuccess(temp);
          console;
        },
        (err) => {
          console.log(err);
        },
        bucketName,
        dir
      );
    },
//上傳成功的方法
    handleZipSuccess(file) {
      this.fileList1 = [];
        this.fileList1.push({
          fileName: file.name, 
          name: file.name 
        });
      console.log(file, '阿里雲返回的檔案地址和檔名稱');
      this.form.fileAddressId = file.url;
      this.form.handoutName = file.name;
      this.form.handoutType = file.name.replace(/.+\./, '');
    },