如何使用JavaScript将文件上传到服务器

使用Web应用程序中最常见的文件处理功能之一,在后台上传文件并对其进行处理

上载文件并在后端使用Web应用程序中最常见的文件处理功能之一对其进行处理:考虑上载化身或附件。

假设我们有一个HTML文件输入元素:

<input type="file" id="fileUpload" />

我们在#fileUpload DOM元素,当用户选择图片时,我们触发handleImageUpload()函数传递所选文件。

const handleImageUpload = event => {
  const files = event.target.files
  const formData = new FormData()
  formData.append('myFile', files[0])

fetch(’/saveImage’, { method: ‘POST’, body: formData }) .then(response => response.json()) .then(data => { console.log(data.path) }) .catch(error => { console.error(error) }) }

document.querySelector(’#fileUpload’).addEventListener(‘change’, event => { handleImageUpload(event) })

我们使用提取API将文件发送到服务器。服务器成功返回后,它将向我们发送图像路径。path财产。

这样,我们将做我们需要做的事情,例如用图像更新界面。

使用Node.js处理文件上传服务器端

服务器部分在下面详细说明。我正在使用Node.js表示处理请求的框架。

安装express-fileuploadnpm模块:

npm install express-fileupload

并将其添加到您的中间件中:

import fileupload from 'express-fileupload'

//or const fileupload = require(‘express-fileupload’)

创建Express应用后,请添加:

app.use(
		fileupload(),
    //...

这是必需的,因为否则服务器将无法解析文件上载。

现在,在req.files。如果您忘记添加该中间件,req.files将是undefined

app.post('/saveImage', (req, res) => {
  const fileName = req.files.myFile.name
  const path = __dirname + '/images/' + fileName

image.mv(path, (error) => { if (error) { console.error(error) res.writeHead(500, { ‘Content-Type’: ‘application/json’ }) res.end(JSON.stringify({ status: ‘error’, message: error })) return }

<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">writeHead</span>(<span style="color:#ae81ff">200</span>, {
  <span style="color:#e6db74">'Content-Type'</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'application/json'</span>
})
<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">end</span>(<span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>({ <span style="color:#a6e22e">status</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'success'</span>, <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'/img/houses/'</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">fileName</span> }))

}) })

这是处理文件所需的最少代码量。

我们称mv上传图片的属性。那是由我们提供给我们的express-fileupload模块。我们将其移至path然后我们将成功(或错误!)传达给客户。

检查客户端上载的文件的属性

如果您需要检查文件类型或文件大小,则可以在handleImageUpload功能,像这样:

const handleImageUpload = event => {
  const files = event.target.files
  const myImage = files[0]
  const imageType = /image.*/

if (!myImage.type.match(imageType)) { alert(‘Sorry, only images are allowed’) return }

if (myImage.size > (100*1024)) { alert(‘Sorry, the max allowed size for images is 100KB’) return }

//… }

免费下载我的JavaScript初学者手册


更多js教程: