vue項目使用阿里雲oss上傳圖片或下載圖片

1.封裝上傳和下載的方法

安裝 ali-oss包

npm install ali-oss

新建 utils/oss.js:

然后在utils/oss.js寫入代碼:

• 1.導入ali-oss

import OSS from 'ali-oss'

• 2.配置信息

    const region = "oss-cn-shanghai"
    const accessKeyId = "xxxxx"
    const accessKeySecret = "xxxxx"
    const bucket = "xxxxx"
    import { Message } from 'element-ui';
    let client = new OSS({
          region : region,
          accessKeyId : accessKeyId,
          accessKeySecret : accessKeySecret,
          bucket : bucket
    });

• 3.上傳

const CooOss = function(file){
  if(this instanceof CooOss){
    let objectKey = file.lastModified+'_'+file.name;
    return new Promise((resolve,reject) => {
      client.multipartUpload(objectKey, file).then(result =>  {
        resolve({
          code : 0,
          objectKey : objectKey,
          url : this.getOssFileUrl(objectKey),
          msg : "ok"
        });
      }).catch(err => {
        console.error('上傳出錯了');
        Message.error('上傳出錯了');
        reject({code : -1 , url : "", objectKey : "", msg : "上傳出錯了"});
      });
    })
  }
  else{
    return new CooOss(file);
  }
};

CooOss.prototype.getOssFileUrl = obecjtKey => {
  if(!obecjtKey) return  new Error("object key 必須傳");
  return "https://" + bucket + "." + region + ".aliyuncs.com/" + obecjtKey;
}

• 4.下載

const downloadFile = function (key) {
  console.log(key)
  let url = client.signatureUrl(key);
  let Img = new Image(), dataURL = '';
  let fileName = key.substring(key.indexOf('_')+1);
  Img.src = url;
  Img.setAttribute("crossOrigin", 'Anonymous');
  Img.onload = function () {
    let canvas = document.createElement("canvas"),
    width = Img.width,
    height = Img.height;
    canvas.width = width;
    canvas.height = height;
    canvas.getContext("2d").drawImage(Img, 0, 0, width, height);
    dataURL = canvas.toDataURL('image/png' );
    let eleLink = document.createElement('a');
    eleLink.download = fileName;
    eleLink.style.display = 'none';
    eleLink.href = dataURL;
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
  };
}

• 5.導出

export default {
  install(Vue){
    Vue.prototype.Oss = {
      uploadFile : CooOss,
      downloadFile : downloadFile
    };
  }
};

2.在main.js里引入

    import Oss from './utils/oss'
    Vue.use(Oss)

3.在需要的頁面調用

// 調用上傳
upload(file){      // 這個file是文件對象
    this.Oss.uploadFile(file).then(res => {
        console.log(res)
    })
},

// 調用下載
downloadImg(key){   // 這個key是objectKey
    this.Oss.downloadFile(key)
}

最后附上utils/oss.js完整代碼

// 導入ali-oss
import OSS from 'ali-oss';

/**
 * 配置信息
 */
const region = "oss-cn-shanghai";  // 換成自己的region
const accessKeyId = "xxxxx";  // 換成自己的accessKeyId
const accessKeySecret = "xxxxx";  // 換成自己的accessKeySecret
const bucket = "xxxxx";  // 換成自己的bucket
import { Message } from 'element-ui';

let client = new OSS({
  region : region,
  accessKeyId : accessKeyId,
  accessKeySecret : accessKeySecret,
  bucket : bucket
});

/**
 *
 * @param {上傳是設置文件key , 一般為文件名稱} objectKey
 * @param {文件file} file
 */

//  上傳
const CooOss = function(file){

  if(this instanceof CooOss){
    let objectKey = file.lastModified+'_'+file.name;
    return new Promise((resolve,reject) => {
      client.multipartUpload(objectKey, file).then(result =>  {
        resolve({
          code : 0,
          objectKey : objectKey,
          url : this.getOssFileUrl(objectKey),
          msg : "ok"
        });
      }).catch(err => {
        console.error('上傳出錯了');
        Message.error('上傳出錯了');
        reject({code : -1 , url : "", objectKey : "", msg : "上傳出錯了"});
      });
    })
  }
  else{
    return new CooOss(file);
  }
};

// 下載
const downloadFile = function (key) {
  console.log(key)
  let url = client.signatureUrl(key);
  let Img = new Image(), dataURL = '';
  let fileName = key.substring(key.indexOf('_')+1);
  Img.src = url;
  Img.setAttribute("crossOrigin", 'Anonymous');
  Img.onload = function () {
    let canvas = document.createElement("canvas"),
    width = Img.width,
    height = Img.height;
    canvas.width = width;
    canvas.height = height;
    canvas.getContext("2d").drawImage(Img, 0, 0, width, height);
    dataURL = canvas.toDataURL('image/png' );
    let eleLink = document.createElement('a');
    eleLink.download = fileName;
    eleLink.style.display = 'none';
    eleLink.href = dataURL;
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
  };
}
/**
 *
 * @param {上傳是設置文件key 一般是文件名} obecjtKey
 */
CooOss.prototype.getOssFileUrl = obecjtKey => {
  if(!obecjtKey) return  new Error("object key 必須傳");
  return "https://" + bucket + "." + region + ".aliyuncs.com/" + obecjtKey;
}

export default {
  install(Vue){
    Vue.prototype.Oss = {
      uploadFile : CooOss,
      downloadFile : downloadFile
    };
  }
};