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