Estoy usando Vue con NodeJs, Vuetify y Express. Cargo el archivo del usuario con el componente de Vuetify:
<v-file-input v-model="documentFile.value" :error-messages="documentFile.errors" accept="application/pdf" /> Luego, quiero pasar el archivo (que está almacenado en this.documentFile.value ) a mi backend, para que lo cargue en Drive. Paso los datos usando Vue Recourse:
var params = { "data": this.data.value "score": this.score.value //"document_file": this.documentFile.value, "comments": this.comments.value }; Vue.http.put('http://localhost:8081/api/new-document', {params: params}).then( response => { console.log("Sent data"); }, response => { console.error(response); } );En mi backend de NodeJS tengo:
router.put('/new-document', function(request, response) { console.log("New Document"); console.log(request.query); // Upload file to drive const oauth2Client = new google.auth.OAuth2( CLIENT_ID, CLIENT_SECRET, REDIRECT_URI ); response.status(200).send({}); });¿Cómo puedo pasar el archivo del cliente al backend?
EDITAR : si elimino el comentario document_file e intento imprimir request.query , se imprime:
{ data: { age: '27', name: 'robert' }, comments: 'comment', "score": 89 } Por alguna razón, ignora document_file .
El código en mi server.js :
const cors = require("cors"); const express = require("express"); const bodyParser = require("body-parser"); const routes = require('./routes'); const path = __dirname + '/../public/'; console.log("STARTED"); const app = express(); app.use(express.static(path)); var corsOptions = { origin: "http://localhost:8080" }; app.use(cors()); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); // map requests to routes app.use('/api', routes); // set port, listen for requests const PORT = process.env.PORT || 8081; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); });Para pasar el archivo del cliente al backend, use el new FormData() .
En tu caso puedes hacer algo como:
var params = new FormData(); params.append('data', this.data.value); params.append('score', this.score.value); params.append('document_file', this.documentFile.value) params.append('comments', this.comments.value);Luego pase el objeto usando axios o Vue Recourse como desee.
axios.put('url', params)EDITAR
Puede usar multer para cargar sus archivos localmente o en la nube. En su caso, puede subir a GoogleStorage
const multer = require('multer') // You can start off by testing local uploads const upload = multer({ dest: 'uploads/' }) // then use this to upload to Google Storage const multerGoogleStorage = require('multer-google-storage') const uploadHandler = multer({ storage: multerGoogleStorage.storageEngine({ autoRetry: true, bucket: '<your_storage_bucket_name>', projectId: '<your_project_ID>', keyFilename: '<your_path_to_key_file>', filename: (req, file, cb) => { cb(null, `/<some_prefix_of_choice>/${Date.now()}_${file.originalname}`) } }) })Cargue el archivo en local o en Google Cloud
// local uploads (destination projectRoot/uploads) router.put('/new-document', upload.single('document_file'), async (request, response) => {}); // or GoogleStorage router.put('/new-document', uploadHandler.single('document_file'), async (request, response) => {});También se pueden cargar varios archivos
app.put('/new-document', upload.array('document_files', 12), function (req, res, next) { // req.files is array of `photos` files // req.body will contain the text fields, if there were any })Luego se puede acceder a los archivos del documento en el servidor Express usando
request.file Puede cargar el archivo. También se puede acceder a los otros objetos de formulario a través de request.body , por ejemplo
request.body.data