首页  >  问答  >  正文

MERN项目中无法通过前端向服务器发送文件

<p>我一直在尝试从React前端向服务器发送图像文件,但文件没有被发送:</p> <p>这是我的前端代码:</p> <pre class="brush:php;toolbar:false;">useEffect(()=>{ const getImage=async ()=>{ if(file){ const data=new FormData(); data.append("name",file.name); data.append("file",file); const response=await API.uploadFile(data); post.picture=response.data; } } getImage(); },[file])</pre> <p>file是React状态,其中包含上传的文件</p> <p>在onClick事件中,我使用setFile函数更新了文件状态:</p> <pre class="brush:php;toolbar:false;"><label htmlFor="fileInput"> <Add fontSize="large" color="action"/> </label> <input type="file" id="fileInput" style={{display:"none"}} onChange={(e)=>{ setFile(e.target.files[0]) } } /></pre> <p>这是我的后端端点:</p> <pre class="brush:php;toolbar:false;">router.post("/file/upload",upload.single("file"),uploadImage);</pre> <p>我正在使用multer中间件:</p> <pre class="brush:php;toolbar:false;">import multer from "multer"; import {GridFsStorage} from "multer-gridfs-storage"; import dotenv from "dotenv"; dotenv.config(); const username=process.env.DB_USERNAME; const password=process.env.DB_PASSWORD; //我们将使用multer-gridfs-storage的组件GridFsStorage来存储图像/文件 const storage=new GridFsStorage({ //文件将上传到的数据库的URL url:`mongodb+srv://${username}:${password}@cluster0.xki5wr4.mongodb.net/blog? retryWrites=true&w=majority`, options:{useNewUrlParser:true}, file:(request,file) => { //我们将接受的文件类型 const match=["image/png","image/jpg,image/jpeg"]; if(match.indexOf(file.memeType)===-1){ return `${Date.now()}-blog-${file.originalname}`; } //如果文件扩展名匹配 return { bucketName:"photos", filename:`${Date.now()}-blog-${file.originalname}` } } }) export default multer({storage});</pre> <p>这是回调函数</p> <pre class="brush:php;toolbar:false;">const url="http://localhost:8000"; export const uploadImage=(request,response)=>{ if(!request.file){ return response.status(404).json({msg:"file not found"}) } const imageUrl=`${url}/file/${request.file.filename}`; return response.status(200).json({imageUrl}); }</pre> <p>由于我通过axios拦截器进行API调用,我还更新了头部部分 这是我的头部部分:</p> <pre class="brush:php;toolbar:false;">headers:{ "Accept": "application/json,form-data", "Content-Type":"application/json", // 'Content-Type': 'multipart/form-data' // "Content-Type": "'application/x-www-form-urlencoded'" }</pre> <p>每当我尝试上传文件时,它会抛出错误,文件未找到</p> <p>请求已发送,文件名也正常,只是文件没有被发送</p>
P粉993712159P粉993712159454 天前500

全部回复(1)我来回复

  • P粉986937457

    P粉9869374572023-08-15 10:26:26

    您的代码有几个错误。修复这些错误,也许问题就会解决:

    替换:

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

    替换:

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

    更改状态码:

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

    替换头部为:

    headers: {
        "Accept": "application/json",
        "Content-Type": "multipart/form-data"
    }

    回复
    0
  • 取消回复