node 实现文件上传和下载
-
安装 multer 和 fs 模块
npm install multer fs --save //multer 文件上传,fs 文件处理 -
上传文件并存放相应路径下
multer({dest:"upload"}).single('file') //dest 后是文件存放的地址,single 中的为 filename //.single(fieldname) - 单个文件上传 //.array(fieldname,[maxCount]) - 多个文件上传 -
修改上传后的文件名称
fs.renameSync(file.path,`upload/${file. originalname}`)问题：用 multer 上传了文件后，文件名为乱码
解决方法：
fs.rename 或 fs.renameSync()修改文件名称
第一个参数为：当前路径
第二个参数为：新的路径
Axios 用法「包含基础的二次封装」& 前后端通信常用数据格式
-
Axios 用法「包含基础的二次封装」
let instance = axios.create(); //设置请求路径 instance.defaults.baseURL = 'http://127.0. 0.1:8888'; //设置请求头 instance.defaults.headers['Content-Type'] = 'multipart/form-data'; //用 qs 插件格式化请求参数 instance.defaults.transformRequest = (data, headers) => { const contentType = headers ['Content-Type']; if (contentType === "application/ x-www-form-urlencoded") return Qs. stringify(data); return data; }; //响应拦截器 instance.interceptors.response.use (response => { return response.data; }); -
前后端通信常用数据格式 1.单文件上传处理「FORM-DATA」:由服务器自动生成文件的名字
url:/upload_single method:POST params:multipart/form-data file:文件对象 filename:文件名字 return:application/json code:0 成功 1 失败, codeText:状态描述, originalFilename:文件原始名称, servicePath:文件服务器地址2.单文件上传处理「FORM-DATA」:由客户端生成文件的名字，传递给服务器处理
url:/upload_single_name method:POST params:multipart/form-data file:文件对象 filename:文件名字「自己需要处理成为 HASH 名 字」 return:application/json code:0 成功 1 失败, codeText:状态描述, originalFilename:文件原始名称, servicePath:文件服务器地址3.单文件上传处理「BASE64」
url:/upload_single_base64 method:POST params:application/x-www-form-urlencoded file:BASE64 filename:文件名字 return:application/json code:0 成功 1 失败, codeText:状态描述, originalFilename:文件原始名称, servicePath:文件服务器地址4.上传切片
url:/uploadchunk
method:POST
params:multipart/form-data
file:切片数据
filename:切片名字「文件生成的 HASH切片编号.后缀」
return:application/json
code:0 成功 1 失败,
codeText:状态描述,
originalFilename:文件原始名称,
servicePath:文件服务器地址5.合并切片url:/upload_merge
method:POST
params:application/x-www-form-urlencoded
HASH:文件的 HASH 名字
count:切片数量
return:application/json
code:0 成功 1 失败,
codeText:状态描述,
originalFilename:文件原始名称,
servicePath:文件服务器地址6.获取已经上传的切片url:/upload_already
method:GET
params:
HASH:文件的 HASH 名字
return:application/json
code:0 成功 1 失败,
codeText:状态描述,
fileList:[...]
基于 FileReader 实现文件读取和相关处理
基于 spark-md5 实现文件名的生成
const changeBuffer = file => {
return new Promise(resolve => {
let fileReader = new FileReader();// 实例化文件阅读器
fileReader.readAsArrayBuffer(file);// 开始阅读这个文件，阅读完成触发 onload 方法
fileReader.onload = ev => {
let buffer = ev.target.result,
spark = new SparkMD5.ArrayBuffer(),// 实例化 spark-md5
HASH,
suffix;
spark.append(buffer);//添加到 spark 算法中计算
HASH = spark.end();//计算完成得到 hash 结果
suffix = /\.([a-zA-Z0-9]+)$/.exec(file.name)[1];
resolve({
buffer,
HASH,
suffix,
filename: `${HASH}.${suffix}`
});
};
});
};
掌握上传文件大小或者格式等限制的处理
实现上传文件的缩略展示
掌握文件上传的两种经典方案：FormData & BASE64
- FormData 实现文件上传
<!-- 创建 formData 对象,为对象中添加键值对(file-xxxfilename-xxx)发 post请求 -->
let formData=new FormData()
formData.append('file',上传的文件对象)
formData.append('filename',上传的文件名)
axios.post(url,formData).then().catch()
- BASE64 实现文件上传
<!-- 实例化 fileReader 对象,
调它的 readAsDataURL 并把 File 对象传给它，
监听它的 onload 事件，load 完读取的结果就在的 result 属性里了. -->
const changeBASE64 = file => {
return new Promise(resolve => {
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = ev => {
resolve(ev.target.result);
};
});
};
BASE64 = await changeBASE64(file);
async function(){
try {
data = await instance.post('/upload_single_base64', {
file: encodeURIComponent(BASE64),
filename: file.name
}, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
if (+data.code === 0) {
alert(`恭喜您，文件上传成功，您可以基于 ${data.servicePath} 地址去访问~~`);
return;
}
throw data.codeText;
} catch (err) {
alert('很遗憾，文件上传失败，请您稍后再试~~');
}
}