react native vision camera拍照上传到本地服务器

最新推荐文章于 2024-08-25 07:04:10 发布

*!?

最新推荐文章于 2024-08-25 07:04:10 发布

阅读量760

点赞数 6

文章标签： react native react.js javascript node.js

本文链接：https://blog.csdn.net/qq_68937887/article/details/137840907

版权

拍照功能参考这里，这里基于后续上传操作

前端

//保存图片后调用upload方法  
CameraRoll.saveAsset(`file://${photo?.path}`, {
            type: "photo"
        }).then(async (res) => {
            //res.node结构如下图
            await upload(res.node)
            //上传完后跳转页面
            props.navigation.navigate("UserInfo")
 })

const upload = (data: any) => {
            //创建formData对象
            const formData = new FormData()
            formData.append("file", {
                //获取路径(注意这里是uri不是url)
                uri: data.image.uri,
                //文件类型
                type: 'image/jepg',
                //图片名字
                name: data.image.filename,
            })
            request({
                url: "/adminapi/user/upload",
                method: "POST",
                data: formData,
                headers: {
                    //使用表单上传添加以下格式
                    'Content-Type': 'multipart/form-data',
                },
            }).then(res => {
                console.log("ok")
            }).catch(err => {
                console.log(err)
            })
}

后端

采用express框架这里不细说，上传图片需要用到 npm install --save multer

const express = require("express")
const UserRouter = express.Router()
//引入multer
const multer = require("multer")
const path = require("path")


const storage = multer.diskStorage({
    destination: function (req, res, cb) {
        //存储位置，静态资源文件夹里
        cb(null, "public/avatar/")
    },
    filename: function (req, file, cb) {
      //修改将要保存图片的名字
        const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1E9)
       //获取后缀名
        const ext = path.extname(file.originalname);
        cb(null, uniqueSuffix + ext)
    }
})

const upload = multer({ storage: storage })

UserRouter.post("/adminapi/user/upload", upload.single("file"), (req, res) => {
    console.log(req.file, "4")
    res.send({
        ok: "22"
    })
})