vue+oss 純前端文件上傳

let OSS = require('ali-oss');
let client = new OSS({ region: '配置自己的', //雲賬號AccessKey有所有API訪問權限，建議遵循阿里雲安全最佳實踐，部署在服務端使用RAM子賬號或STS，部署在客戶端使用STS。 accessKeyId: '配置自己的', accessKeySecret: '配置自己的',
  bucket: '配置自己的' })

 注：以上是配置OSS

 

文件上傳api接口:

const put = async (ObjName, fileUrl, progressFun) => {
  try {
    let result = await client.multipartUpload(`${ObjName}`, fileUrl, progressFun) return result 
} catch (e) { console.log(e) } 
}

注：ObjName 可以是自定義文件名例如（dells.txt）也可以  `${userId}/${nowDay}/${ObjName}`  例如（/userId/nowDay/dells.txt）這樣做文件目錄  上傳成功鏈接是這樣的http://oss官網/userId/nowDay/dells.txt

　　fileUrl 是文件file對象 或者 blob數據以及OSS buffer

　　progressFun 是獲取上傳文件進度（可要可不要）

 

暫停上傳:

cancelApi() {
  return client.cancel()
}
注：關閉上傳窗口時 可以調用 （如果不暫停 關閉窗口后 會后台繼續上傳）

 

文件下載api接口：

async function download(fileUrl, filename) {
  return await client.signatureUrl(fileUrl, {
    response: {
      'content-disposition': `attachment;filename=${encodeURIComponent(filename)}`
    }
  })
}
注釋：fileurl：需要下載的文件連接   filename：下載的文件名字               （其中用到轉碼）

 

調用傳參后 會返回一個下載連接 使用以下方法打開下載連接；

    openUrl(url, fileName) {
      let a = document.createElement("a"); //添加a標簽元素
      a.setAttribute("href", url);　　//給a標簽增href屬性
      a.setAttribute("download", fileName); //給a標簽新增download屬性 下載文件名
      a.setAttribute("target", "_blank"); //新增標簽頁
      a.click(); 
      a.remove();
    },

這是我寫的 利用創建a標簽再出發下載的方法 可以參考一下