html 上传
js
let but = document.querySelector('button'); let form = document.querySelector('form'); but.addEventListener('click', () => { let Formdata = new FormData(form); //前端所需的函数 Formdata.append('file', form.children[0].files[0]);//获取form下的子元素 let xhr = new XMLHttpRequest(); xhr.open('POST', 'http://loalhost:8000/loadUp'); xhr.send(Formdata); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(xhr.response); } } } })
js 服务器的建立
说明一下，这里需要node 来加载express ，还需要下载mutiparty 模块
/** 上传 */ const express = require('express'); const app = express(); //后端上传需要的 const multiparty = require('multiparty'); app.post('/loadUp', (request, response) => { //上传图片 let form = new multiparty.Form({ uploadDir: '你想要上传并存放的位置' //文件转存 }); form.parse(request, (err, fields, files) => {//fields: 上传普通的数据 ；file: 上传文件 console.log(fields, 'fields'); console.log(files, 'files'); }) response.setHeader('Access-Control-Allow-Origin', '*');//允许请求所有跨域 response.send("200"); }) app.listen(8000, () => { console.log("8000端口启动"); })
html 下载
js
//后端下载需要模块 const fs = require('fs'); app.get('/getImg', (request, response) => { //图片的下载 response.setHeader("Access-Control-Allow-Origin", "*");// 允许请求所有跨域 * fs.readFile('下载图片的位置', (err, data) => { console.log(data); response.send(data); }) app.listen(8000, () => { console.log("8000端口启动"); }) })
