Tidak dapat menghantar fail ke pelayan melalui bahagian hadapan dalam projek MERN
P粉993712159
P粉993712159 2023-08-14 20:52:51
0
1
521
<p>Saya telah cuba menghantar fail imej ke pelayan dari bahagian hadapan React, tetapi fail itu tidak dihantar: </p> <p>Ini ialah kod bahagian hadapan saya:</p> <pre class="brush:php;toolbar:false;">useEffect(()=>{ const getImage=async ()=>{ if(fail){ const data=BorangData baharu(); data.append("nama",file.name); data.append("fail",fail); respons const=menunggu API.uploadFile(data); post.picture=response.data; } } getImage(); },[fail])</pre> <p>fail ialah keadaan React yang mengandungi fail yang dimuat naik</p> <p>Dalam acara onClick, saya mengemas kini status fail menggunakan fungsi setFile: </p> <pre class="brush:php;toolbar:false;"><label htmlFor="fileInput"> <Tambah fontSize="large" color="action"/> </label> <masukan type="file" id="fileInput" style={{paparan:"tiada"}} onChange={(e)=>{ setFile(e.target.files[0]) } } /></pra> <p>Ini ialah titik akhir bahagian belakang saya: </p> <pre class="brush:php;toolbar:false;">router.post("/file/upload",upload.single("file"),uploadImage);</pre> <p>Saya menggunakan multer middleware: </p> <pre class="brush:php;toolbar:false;">import multer daripada "multer"; import {GridFsStorage} daripada "multer-gridfs-storage"; import dotenv daripada "dotenv"; dotenv.config(); const username=process.env.DB_USERNAME; const password=process.env.DB_PASSWORD; //Kami akan menggunakan GridFsStorage komponen multer-gridfs-storage untuk menyimpan imej/fail storan const=GridFsStorage baharu({ //URL pangkalan data yang mana fail akan dimuat naik url:`mongodb+srv://${username}:${password}@cluster0.xki5wr4.mongodb.net/blog? retryWrites=true&w=majoriti`, pilihan:{useNewUrlParser:true}, fail:(permintaan,fail) => //Jenis fail yang akan kami terima const match=["image/png","image/jpg,image/jpeg"]; if(match.indexOf(file.memeType)===-1){ kembalikan `${Date.now()}-blog-${file.originalname}`; } //Jika sambungan fail sepadan kembali { Nama baldi:"foto", nama fail:`${Date.now()}-blog-${file.originalname}` } } }) eksport multer lalai({storage});</pra> <p>Ini ialah fungsi panggil balik</p> <pre class="brush:php;toolbar:false;">const url="http://localhost:8000"; eksport const uploadImage=(request,response)=>{ if(!request.file){ return response.status(404).json({msg:"fail tidak ditemui"}) } const imageUrl=`${url}/file/${request.file.filename}`; return response.status(200).json({imageUrl}); }</pre> <p>Memandangkan saya membuat panggilan API melalui pemintas axios, saya turut mengemas kini bahagian pengepala Ini bahagian pengepala saya: </p> <pre class="brush:php;toolbar:false;">headers:{ "Terima": "aplikasi/json,form-data", "Content-Type":"application/json", // 'Content-Type': 'multipart/form-data' // "Content-Type": "'application/x-www-form-urlencoded'" }</pre> <p>Setiap kali saya cuba memuat naik fail, ia menimbulkan ralat, fail tidak ditemui</p> <p>Permintaan telah dihantar dan nama fail adalah biasa, tetapi fail itu belum dihantar</p>
P粉993712159
P粉993712159

membalas semua(1)
P粉986937457

Terdapat beberapa ralat dalam kod anda. Betulkan ralat ini dan mungkin masalah akan diselesaikan:

Pengganti:

if (match.indexOf(file.memeType) === -1) {
to
if (match.indexOf(file.mimetype) === -1) {

Pengganti:

const match=["image/png","image/jpg,image/jpeg"];

to     
const match = ["image/png", "image/jpg", "image/jpeg"];

Tukar kod status:

if (!request.file) {
    return response.status(400).json({ msg: "File not received" });
}

Ganti pengepala dengan:

headers: {
    "Accept": "application/json",
    "Content-Type": "multipart/form-data"
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan