Upload Image
Less than 1 minute...
This cookbook guides you on how to set up your own image service to upload images in comments.
@waline/client provides the imageUploader option. You should handle the image object passed in by the client by yourself, and after uploading the image yourself, return an image address through Promise.
Demo
An example of using the lsky-pro graph bed.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Waline imageUploader demo</title>
<link
rel="stylesheet"
href="https://unpkg.com/@waline/client@v3/dist/waline.css"
/>
</head>
<body>
<div id="waline" style="max-width: 800px; margin: 0 auto"></div>
<script type="module">
import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
const waline = init({
el: '#waline',
serverURL: 'https://waline.vercel.app',
path: '/',
lang: 'en-US',
imageUploader: (file) => {
let formData = new FormData();
let headers = new Headers();
formData.append('file', file);
headers.append('Authorization', '!{API TOKEN}');
headers.append('Accept', 'application/json');
return fetch('!{API URL}', {
method: 'POST',
headers: headers,
body: formData,
})
.then((resp) => resp.json())
.then((resp) => resp.data.links.url);
},
});
</script>
</body>
</html>
TIPS: The comment area is only for demo. If you have any questions, please go to Github Discussion to ask.
