OSS附件上傳下載 從前端到node

1. 前端

　　上傳文件傳值

1. 自定義模板樣式
 <div class="form-item-file-upload">
 選擇文件
 <input type="file" @change="fileUpload($event)" name="file">
 </div>
 <a :href="imgUrl" target="_blank" class="form-item-file-upload-text">
 {{ imgUrl ? "已上傳" : "" }}
 </a>
2. 單個圖片上傳
 fileUpload(event,m){
   const that = this;
   const file = event.target.files[0];
    
   /*[file值]：-- File(6626) {name: "12(3).csv", lastModified: 1572846212192, lastModifiedDate: Mon Nov 04 2019 13:43:32 GMT+0800 (中國標准時間), webkitRelativePath: "", size: 6626, …}*/
    
   // 通過FormData將文件轉成二進制數據
   let formdata = new FormData();
   // 將文件轉化成二進制
   formdata.append("file",file);
   // 提交請求
   uploadimg(formdata).then((res)=>{
    that.file = res.data;
     that.$emit('fileUpload', res.data);
 })
 
 /*
    res {
   mimetype: "text/plain"
   name: "小點.txt"
   size: 2408
   url: "https://bucketHost + result.name/16e3acb9dae.txt"
  }
 */ 
​
}

2. API -- node -- express -- multer -- 上傳單個文件

　　接受前端二進制文件流上傳到阿里服務器 使用的是OSS存儲

const settings = {
 bucket: {
       host: process.env.BUCKET_HOST, // 自定義
       region: process.env.BUCKET_REGION, 
       accessKeyId: process.env.BUCKET_ACCESS_KEY_ID,
       accessKeySecret: process.env.BUCKET_ACCESS_KEY_SECRET,
       bucket: process.env.BUCKET_NAME
   }
}
const OSS = require('ali-oss');
const store = new OSS(setting.bucket);
const multer = require('multer');
const uploadSingle = multer().single('file');
​
uploadSingle(req, res, function (err) {
   if (err) {
     return res.json(500, {
       err: err
     })
   }
   let file = req.file;
   // getFileName 需要自定義一個方法存儲文件名稱 OSS 他是對象形式存儲 名稱不能重復 重復會覆蓋
   store.put(getFileName(file.originalname), file.buffer, {
     mime: file.mimetype
   }).then(result => {
  // 對返回的結果做操作 
  // 我這是放到數據庫的一張表里面做記錄 
  // 返回前端{url:bucketHost + result.name, name: file.originalname }
 })
})
 /* -- file --
  // 上傳到文件類型為
  // upload file error: TypeError: Must provide String/Buffer/ReadableStream for put.
  {
   file: {
    buffer: {type: "Buffer",…}, // 上傳文件使用
    encoding: "7bit",
    mimetype:"application/vnd.openxmlformats-  officedocument.spreadsheetml.sheet", // 請求頭 文件類型
    originalname: "ADX審批流驗收會議記錄(1).xlsx"，// 文件名稱
    size: 18648
   }
  }
 */
oss文檔URL：https://help.aliyun.com/document_detail/31978.html?spm=5176.8465980.0.0.4e701450SP5N1j&_from=help_widget_detail

3. 下載

// 通過創建a標簽進行下載
const url = this.file.url;
const link = document.createElement('a')
link.style.display = 'none'
link.href = url;
link.target = "_blank";-
// link.setAttribute(
//     'download',
//     '測試數據模板'
// )
document.body.appendChild(link)
// console.log("link Obj", link);
link.click()
​
// 更改download來設置文件名稱 因為是從阿里雲服務器拿到的瀏覽器跨域 導致屬性失效 -- 暫時只能想到從api再包一層 返回前端下載文件
​
 return request({
     url: ``,
     method: 'get',
     responseType: 'blob' // 前端要加個參數
     // params: query
 })
// 從服務器獲取數據    
async function getUpload(req, res){
   try {
       let result = await store.get(req.name);
       Object.keys(result.res.headers).forEach(item => {
           res.setHeader(item, result.res.headers[item]);
       });
       res.send(Buffer.from(result.content));
   } catch (e) {
       console.log(e);
   }
}

 

4. 知識點

• new FormData()

• node -- express -- multer

• OSS簡單上傳 -- 還有流式、分片等

• buffer