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官網(wǎng)/userId/nowDay/dells.txt

  fileUrl 是文件file對象 或者 blob數(shù)據(jù)以及OSS buffer

  progressFun 是獲取上傳文件進度(可要可不要)

暫停上傳:

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

文件下載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();
    },
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 今天感恩節(jié)哎,感謝一直在我身邊的親朋好友。感恩相遇!感恩不離不棄。 中午開了第一次的黨會,身份的轉變要...
    余生動聽閱讀 10,810評論 0 11
  • 彩排完,天已黑
    劉凱書法閱讀 4,467評論 1 3
  • 沒事就多看看書,因為腹有詩書氣自華,讀書萬卷始通神。沒事就多出去旅游,別因為沒錢而找借口,因為只要你省吃儉用,來...
    向陽之心閱讀 4,971評論 3 11
  • 表情是什么,我認為表情就是表現(xiàn)出來的情緒。表情可以傳達很多信息。高興了當然就笑了,難過就哭了。兩者是相互影響密不可...
    Persistenc_6aea閱讀 129,539評論 2 7

友情鏈接更多精彩內容