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