Comments (2)
I bump into the same issue using pinia store for input file
I manage rewritng a ref()
input (called inputFile) with <script setup></script> and set the name of the input in <template></template>
tag as name="file"
here is what i have done in front end app :
`<template>
<div class="form_control">
<label for="image">Image</label>
<input
type="file"
id="image"
name="file" // <-- here
accept="image/png, image/jpeg, image/webp"
ref="inputFile" // <-- here
/>
</div>
</template>`
script
`<script setup>
import { ref } from 'vue'
const inputFile = ref(null) <-- Here
async function createPost() {
const myInputFile = inputFile.value //reactivity fundamentals
//send img post
const image = await primarimageapi(myInputFile)
}
</script>`
On the api function primarimageapi i make this:
`export const primarimageapi = async (myInputFile) => {
try {
const file = myInputFile.files[0] <-- Here File Grabbed
//formData instance
const formData = new FormData()
//add element
formData.append('file', file)
const prePostImg = await fetch(`${base_url}/post/image/create`, {
method: 'POST',
body: formData
})
.then((res) => res.json())
.then((newres) => newres.image_url)
return prePostImg
} catch (err) {
console.log(err)}}`
my blog-app three elements
was organized like below:
`blog*app --|
|
|* \_ _client
|
|
|_ \_ _server
|
|_ _src
|
|_ _public
| |
| |_ _images
|
|
|_ _routes
|
|_ \_post-routes.js (file)`
In post-route.js
file i wrote this :
//multer
`const storage = multer.diskStorage({destination: function (req, file, callback) {
callback(null, path.join(__dirname, "../public/images"));
},
filename: function (req, file, callback) {
const filename = `${file.fieldname}_${Date.now()}${path.extname(
file.originalname
)}`;
callback(null, filename);},
})
const upload = multer({
storage: storage,
limits: { fileSize: 1000000 },
});
`
//middleware destination image - express
`router.use(`/images`, express.static(path.join(__dirname, "../public/images")))`
//router
`router.post("/image/create", upload.single("file"), (req, res) => {
try {
const base_url = process.env.API_URL;
res.status(200).json({
success: true,
image_url: `/${base_url}/images/${req.file.filename}`,
});
} catch (err) {
console.log(err);
}
})`
then i obtain inside src/public/images
my first image : file_1717587794699.jpg
from multer.
Looking your code, I found that the problem was in my middleware.
now, The problem was solved. thank you and your code.
from multer.
Related Issues (20)
- TypeError: Cannot read properties of undefined (reading 'length') when fieldNameSize is not set HOT 6
- Upgrade to the latest version of busboy to prevent potential DOS attack via Dicer HOT 1
- File upload got stuck while uploading large text files HOT 8
- Upload file use Multer with Multer-gridfs-storage in environment of bun is not working but when I use environment of nodejs then it's working? HOT 1
- req.file returning Undefined on frontend, but with Insomnia returns correctly HOT 4
- Custom storage engine not working
- MulterError: Unexpected field when trying to use different storage configuration HOT 1
- Update Docs: Error: read ECONNRESET thrown during test using supertest, mocha but works fine while using postman. HOT 1
- Why does Multer does not release memory? HOT 1
- `preservePath` option not respected HOT 2
- This module only works with node 14 or LOWER HOT 39
- file.size undefined with multiple files HOT 2
- Request not finish when recieve an error HOT 11
- File upload middleware does not work when I chain it with other middlewares. I get req.file = undefined HOT 3
- bug: transfer-encoding HOT 3
- File type shows correct on the frontend but it changes to application/octet-stream on the backend HOT 1
- CVE-2022-24434: DoS affecting dicer (sub-dependency) HOT 2
- Publish version 1.4.5 HOT 1
- last filename is missing from `req.files` while use of 'fileds' middleware.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from multer.