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
