vue(axios) + node.js(express) 上传文件
<h3 id="vueaxios--nodejsexpress-上传文件">vue(axios) + node.js(express) 上传文件</h3><p>vue</p>
<pre><code class="language-vue"><template>
<input type="file" class="preFile" name="staffFile" multiple="multiple" @change="changeFn($event)"/>
</template>
<script>
export default {
methods:{
changeFn(e) {
//新建 formData 对象
let formData = new FormData()
//添加文件信息
formData.append("file", e.target.files)
let config = {
//必须
headers: {
"Content-Type": "multipart/form-data"
},
//获取上传进度, 可去掉
onUploadProgress: function(progressEvent) {
let complete =
((progressEvent.loaded / progressEvent.total) * 100) | 0
console.log(complete + "%")
},
}
this.axios.post("服务端地址/upload", formData, config).then(result => {
console.log(result.data)
});
}
}
}
</script>
</code></pre>
<p>node.js</p>
<pre><code class="language-javascript">//引入multer
const multer = require('multer')
//设置上传文件存储地址
const upload = multer({ dest: 'uploads/' })
router.post('/upload', upload.single('file'), (req, res, next) => {
//返回客户端的信息
let data = {}
data['code'] = 200
//获取文件
let file = req.file
if (file) {
//获取文件名
let fileNameArr = file.originalname.split('.')
//获取文件后缀名
var suffix = fileNameArr
//文件重命名
fs.renameSync('./uploads/' + file.filename, `新路径+新文件名.${suffix}`)
file['newfilename'] = `新文件名.${suffix}`
}
data['file'] = file
res.send(data)
})
</code></pre>
<h3 id="下载文件">下载文件</h3>
<p>html</p>
<pre><code class="language-html"><a href="服务器地址/download?filename=文件名" download="新文件名">下载</a>
</code></pre>
<p>js</p>
<pre><code class="language-javascript">let url = `服务器地址/download?filename=文件名&oldname=新文件名`
function downlaod(url){
let iframe = document.createElement('iframe');
iframe.style.display = 'none'
iframe.src = url
iframe.onload = function () {
document.body.removeChild(iframe)
}
document.body.appendChild(iframe)
}
</code></pre>
<p>node.js</p>
<pre><code class="language-javascript">router.use('/download', (req, res, next) => {
let filename = req.query.filename
let newname = req.query.newname || req.query.filename
let file = '文件地址' + filename
//设置响应头
res.writeHead(200, {
//告诉浏览器这是一个二进制文件
'Content-Type': 'application/octet-stream',
//告诉浏览器这是一个需要下载的文件
'Content-Disposition': 'attachment; filename=' + encodeURI(newname),
})
//文件输入流
let readStream = fs.createReadStream(file)
//以二进制的格式写入 res
readStream.on('data', (chunk) => {
res.write(chunk, 'binary')
});
readStream.on('end', () => {
res.end()
})
})
</code></pre><br><br>
来源：https://www.cnblogs.com/writecycle/p/12047708.html
頁:
[1]