移动校园(9):uniapp照片上传,以及从nodejs服务器获取照片

发布于:2024-07-11 ⋅ 阅读:(20) ⋅ 点赞:(0)

后端:

安装中间件multer,刚好对应前端提交数据

npm install --save multer

 

Multer详解(Node.js中间件)-CSDN博客

一直这样

又看了二个小时,搜遍全网,改了又改,各种测试,终于让我发现了问题,就是后端存储文件夹必须是以及存在的,不会自动创建

router.post('/property/submit',upload.single('file'),(req,res)=>
{
    let imgFile = req.file;//获取图片上传的资源
    console.log(imgFile)
    let tmp = imgFile.path;//获取临时资源
    let ext = path.extname(imgFile.originalname);//利用path模块获取 用户上传图片的 后缀名
    let newName = "" + (new Date().getTime()) + Math.round(Math.random() * 10000) + ext;  //给用户上传的图片重新命名 防止重名
    let newPath = "../public/images/" + newName; //给图片设置存放目录
    let fileData = fs.readFileSync(tmp);//将上传到服务器上的临时资源 读取到 一个变量里面
    fs.writeFileSync(path.join(__dirname, newPath), fileData);//重新书写图片文件  写入到指定的文件夹下
    console.log('http://127.0.0.1:3090/images/' + newName)
    let newurl = 'http://127.0.0.1:3090/images/' + newName
    res.send(newurl)
})

使用前提是你已经设置静态资源目录,而且配置了multer中间件

静态资源目录

app.use(express.static('public'))

中间件

const multer  = require('multer')


const upload = multer({ dest:"temp/" });

测试一下,你就能获得丁真纯一郎了

然后是关于将图片存入数据库,有两种,有一种是存二进制文件,有一种是存地址,第二种比较简单,而且服务器再本地的话就没什么区别,所以下面写第二种,整个数据有两张表,所以需要有一个key把二者联系一下 

    let query=`insert into photos (Timestamp,photos,username) values ('${Timestamp}','${newurl}','${name}')`
    req.app.locals.db.query(query)