Question

我正尝试将用户提交的图像上传到我的mongoDB服务器，我计划首先将图像转换为base64，然后在提交时将其发送到我的后端，它将base64转换为二进制数据。这是我的项目中的样子：

    <v-form id="form" @submit.prevent ='updateWinery'>

        <input type="file" @change="logoData" id="uploader1" name="logo" style="display: none" accept="*.jpg">
        <v-btn label="Logo" @click="upload1" id="clicker">Logo</v-btn>

        <input type="file" @change="bgData" id="uploader2" name="bgImg" style="display: none" accept="*.jpg">
        <v-btn label="Background Image" @click="upload2" id="clicker">Background</v-btn>

    </v-form>

这是用户将使用隐藏输入和按钮触发隐藏输入单击操作的方式提交所需图像的形式。我这样做是因为Vuetify没有文件上传按钮元素。

@change和@click看起来像这样：

    logoData(e){
        this.logo = e.target.files[0]
        //here i think is where i need to convert to base64
    },
    bgData(e){
        this.bgImg = e.target.files[0]
        //and here too
    },
    upload1(){
        var upld1 = document.querySelector('#uploader1')
        upld1.click()
    },
    upload2(){
        var upld2 = document.querySelector('#uploader2')
        upld2.click()
    },

然后，一旦它们进入base64，就会发送到我的后端并将它们转换为二进制字符串数据，然后发布到我的数据库中。

我的问题是：1.）我不知道如何转换为base64，并且2.）我不知道如何转换为二进制。

我复制并粘贴了某些东西并使它工作，但是我认为这是一种古老的处理方式，但是我不确定，我只是知道它可以工作

//this is a separate project, not the one im working on
var express = require('express')
var fs = require('fs')
var mongoose = require('mongoose')
var bodyParser = require('body-parser')
var Schema = mongoose.Schema
var app = express()
var imgPath = 'C:/Users/UserName/Desktop/test.png'
//not using my mongoDBLink, feel free to replace 'mongoDBLink' with your own link though.
mongoose.connect('mongoDBLink', { useNewUrlParser: true })
  .then(() =>{
    app.listen(3000)
  })



var schema = new Schema({
    img: { data: Buffer, contentType: String }
});

var A = mongoose.model('A', schema)

    var a = new A;
    a.img.data = fs.readFileSync(imgPath)
    a.img.contentType = 'image/png'
    console.log(A) //console logged this just to see what this actually is
    a.save(function (err, a) {
      if (err) throw err
      console.log('saved img to mongo')
    })

  app.get('/', function (req, res, next) {
    A.findById(a, function (err, doc) {
      if (err) return next(err)
      res.contentType(doc.img.contentType)
                  console.log(doc.img.data)

      res.send(doc.img.data)
    })
  })

转到localhost：3000将显示我的图像，并且在mongoDB服务器中，它将显示我的数据：

{
    "_id": {
        "$oid": "5b46964c339cfc32f87b1d3e"
    },
    "img": {
        "data": "<Binary Data>",
        "contentType": "image/png"
    },
    "__v": 0
}

无论出于何种原因，img.data的字面意思都是字符串“二进制数据”，但在控制台中则相反。

映像到base64，然后到二进制数据Javascript

0 个答案: