微信小程序上传图片出现错误，404错误

Question

nodejs+微信小程序上传图片提示

Unexpected token ＜ in JSON at position 0

   uploadImg() {
        let { imgList } = this.data;
        wx.chooseMedia({
            count: 6 - imgList.length,
            mediaType: ['image'],
            sourceType: ['album', 'camera'],
            success: (res) => {
                const { tempFiles } = res;
                console.log(tempFiles);
                tempFiles.forEach((item, index) => {
                    wx.uploadFile({
                        url: 'http://localhost:3001/uploadImg',
                        filePath: item.tempFilePath,
                        name: 'file',
                        success: (res) => {
                            const { data } = res;
                            let { path } = JSON.parse(data)[0];
                            console.log(path);
                            let _path = `http://localhost:3001/${path}`;
                            console.log(_path);
                            imgList.unshift(_path);
                            this.setData({
                                imgList
                            })
                        //   const data = res.data
                          //do something
                        },
                        fail: (err) => {
                            console.log(err);
                        }
                    })
                })

            }
        })
    },

app.post("/uploadImg",upload.array('file',6),(req,res)=>{
    res.send(req.files)//这个接口的意思是调用定义好的实体upload上传图片，一次性上传的图片次数最大为10张，上传完成后会向接口返回存放地址files
})

这个要怎么解决，一直卡在这里了

Answer 1

引自免费微信小程序：皆我百晓生

从你提供的代码来看，微信小程序端的上传图片功能与后端Node.js服务器接口之间的通信出现了问题。错误提示 "Unexpected token ＜ in JSON at position 0" 表明服务端返回的数据并不是一个有效的JSON格式数据，而是以 "<" 符号开头，这通常是HTML或者错误页面内容。

首先，请确保你的Node.js服务器运行正常，并且"/uploadImg"接口可以正确处理文件上传请求。使用multer库处理文件上传时，正确的响应应该包含上传成功后的文件信息，而不是直接发送req.files。

建议调整Node.js服务端代码如下：

const multer = require('multer');
// 设置multer存储配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});

const upload = multer({ storage });

app.post("/uploadImg", upload.array('file', 6), (req, res) => {
  try {
    if (!req.files || req.files.length === 0) {
      return res.status(400).json({ error: 'No files were uploaded.' });
    }

    const paths = req.files.map(file => `http://localhost:3001/uploads/${file.filename}`);
    res.json({ paths }); // 返回一个JSON对象，包含上传成功的文件路径
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'An error occurred while uploading the files.' });
  }
});

接下来，请检查以下几点：

1. 确保Node.js服务器运行在可被微信小程序访问到的公网地址或通过局域网内IP访问（而非localhost）。
2. 确认上传图片的URL是否正确指向了Node.js服务器上的“/uploadImg”接口。
3. 检查后端日志，查看是否有详细的错误信息，例如权限、磁盘空间不足等问题。

如果上述步骤均无误，那么问题可能出在服务器对上传请求的响应上。当服务器不能正确处理上传请求并返回预期的JSON格式数据时，就会出现这个错误。根据上述修改，应当能解决这个问题。