上传文件
本文介绍如何通过爱智 App 将本地图片、视频、音频等文件上传到爱智。
概述
文件上传应用非常广泛，大部分网站或应用都有文件上传功能。文件上传的场景包括单文件上传、多文件上传、目录上传和服务端上传等，通过文件上传，我们可以将本地的资源文件发送到服务器上，有效地实现资源共享和信息通讯。
本文介绍如何通过爱智 App 上传文件到爱智。在爱智 App 中，目前支持 Ajax 和 Fetch 两种文件上传方式。
上传案例
参考以下示例，使用 Ajax 和 Fetch 方式上传文件到爱智。
爱智应用前端部分
<!DOCTYPE html>
<html lang="en">
<head>
<title>EdgerOS Upload File</title>
</head>
<body style="text-align: center;">
<input type="file" id="file">
<button type="button" onclick="fetchUpload()">FETCH</button>
<button type="button" onclick="ajaxUpload()">AJAX</button>
</body>
<script type="text/javascript">
/**
* fetch upload file
*/
async function fetchUpload() {
const form = _createFormData()
try {
console.log('fetch upload start')
const response = await fetch('/api/upload', {
method: 'POST',
body: form,
})
console.log('fetch upload success:', response.status);
} catch (error) {
console.error('Error:', error);
}
}
/**
* ajax upload file
*/
function ajaxUpload() {
const form = _createFormData()
const xhr = new XMLHttpRequest()
xhr.open('post', '/api/upload', true)
xhr.onload = (evt) => console.log('ajax upload success:',evt.target.responseText)
xhr.onerror = (evt) => console.error(evt.target.responseText)
xhr.upload.onprogress = (evt) => console.log('ajax upload progress:',Math.round(evt.loaded / evt.total * 100) + "%")
xhr.upload.onloadstart = (evt) => console.log('ajax upload start')
xhr.send(form)
}
/**
* create FormData
*/
function _createFormData() {
const fileInfo = document.getElementById("file").files[0]
if (!fileInfo) {
console.log('No selection file');
throw new Error('No selection file')
}
const form = new FormData()
form.append('filename', fileInfo.name)
form.append('file', fileInfo)
return form
}
</script>
</html>
爱智应用后端部分
/* Import system modules */
const WebApp = require('webapp');
const multer = require('middleware').multer;
/* Create App */
const app = WebApp.createApp();
/* Set static path */
app.use(WebApp.static('./public'));
/* Set upload path */
const storage = multer.diskStorage({
destination: '/file-upload',
filename: (req, file, cb) => cb(null, Date.now() + '-' + req.body.filename)
});
const upload = multer({ storage: storage });
app.post('/api/upload', upload.single('file'), (req, res) => {
console.log('uploaded file saved: ', req.file.path, req.file.size)
res.json({ errcode: 0, errmsg: 'ok', })
})
/* Start App */
app.start();
/* Event loop */
require('iosched').forever();
无论是使用 Ajax 还是 Fetch，都能将文件上传到爱智。其中 Ajax 能够快速地将增量更新呈现在用户界面上，无需刷新整个页面；Fetch 采用 Promise 的异步处理机制，提供了丰富的 API，写法和使用更加简单。
陕公网安备61019002002605号