vscode打包的dist文件怎么整合到后端代码中

Posted 2023-05-02

您好，在将VSCode打包的dist文件整合到后端代码中时，需要您做一些准备工作。首先，您需要在VSCode中安装Node.js，以便可以使用npm工具来安装所需的依赖项。其次，您需要在VSCode中安装Webpack，以便可以将dist文件打包成一个单独的文件。最后，您需要将打包的文件上传到后端代码中，以便可以在服务器上运行。总之，将VSCode打包的dist文件整合到后端代码中，需要您做一些准备工作，包括安装Node.js和Webpack，以及将打包的文件上传到后端代码中。 参考技术A 您好，在将VSCode打包的dist文件整合到后端代码中之前，首先需要确保您的VSCode已经安装了Node.js和npm，并且已经正确配置了package.json文件。接下来，您可以使用npm install命令安装所有的依赖项，以便在VSCode中运行项目。接下来，您可以使用npm run build命令将dist文件夹中的文件打包到您的后端代码中。最后，您可以使用npm run start命令来启动您的应用程序，以便在浏览器中查看您的应用程序的最终效果。 参考技术B 1. 将vscode打包的dist文件夹放到后端代码的根目录下；

2. 在后端代码中添加一个接口，用于接收前端发送的请求；

3. 在接口中，使用express.static()方法，将dist文件夹挂载到指定的路径；

4. 在接口中，使用res.sendFile()方法，将dist文件夹中的index.html文件发送给前端；

5. 前端收到index.html文件后，就可以正常使用vscode打包的dist文件了。 参考技术C 答:vscode打包的dist文件这么整合到后端代码中，打包后项目目录中会自动生成dist文件夹,如图: index.html放入static文件夹,和后端融合,...
vscode:常用命令(运行项目,打包等)及融合后端springboot项目...
前端打包流程 在终端中输入npm run build 即可,前端打包成功后,项目中会多出一个dist文件夹,即前端 参考技术D 对于VSCode打包的dist文件，应将它们整合到后端代码中，首先要将该文件夹上传到Web服务器目录中，然后在后端代码中指定该文件夹的路径，最后通过HTTP请求来获取文件中的内容。

如何将图片从前端上传到后端

【中文标题】如何将图片从前端上传到后端

【英文标题】：how to upload image from frontend to backend

【发布时间】：2017-06-29 16:57:14

【问题描述】：

我有一个名为上传图片的按钮。点击该按钮后，一个模式正在打开。有两个不同的字段，称为图像标题、输入文件。提交保存按钮。它将转到 image.js 文件。我无法理解如何将这些图像保存到我的数据库中。有人请帮助我。

前端代码

/modal.html

         <div class="container">
              <div class="row">
                  <div class="col-md-12">
                      <div class="uploadPhotoGallery">
                          <button type="button" data-toggle="modal" data-target="#myModal" id="uploadButton">Upload Image</button>
                      </div>                     
                  </div>
              </div>
         </div>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Please Upload Image</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" id="imagetitle" placeholder="Image Title">
                </div>
                 <div class="form-group">
                     <input type="file" class="form-control" id="input-image" name="input-image" accept="image/*">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancle</button>
                <button type="submit" class="btn btn-default" id="myFormSubmit">Save</button>
            </div>
        </div>
    </div>
</div>
 <script src="javascript/image.js"></script> 

/image.js

$(function() 
    $('#myFormSubmit').click(function (e) 
       //How to send Image from here to backend
   );
);

Node.js 后端代码

/request.js

exports.addads = function(req, res) 
var addads = req.app.db.model('Adds');
      var data =  imageTitle       : req.body.imageTitle,
                   img              : "http://localhost:4040/"+req.body.img, ;
      var query = addads(data);
      query.save(function(err,data)  
        if(err) 
          console.log(err.toString());
         else   
          //  console.log('Adds Added Successfully');
            res.json( success: true );
            update_routers(req);
          
      );
;

 //Image Logic  
    var file_url = '';
    var storage = multer.diskStorage( //multers disk storage settings
        //console.log("sdfas");
        destination: function (req, file, cb) 
            cb(null, 'public/img/');
        ,
        filename: function (req, file, cb) 
            var datetimestamp = Date.now();
            file_url = file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]
            cb(null, file_url);
        
    );

    var upload = multer( //multer settings
                    storage: storage
                ).single('file');

    /** API path that will upload the files */
    app.post('/uploadImage', function(req, res) 
      //  console.log("req*****", req.fields);
        upload(req,res,function(err)
            if(err)
                 res.json(error_code:1,err_desc:err);
                 return;
            
            console.log("file_url", file_url);
            exec('convert '+ "public/img/" + file_url + " -resize 100x100 " + "public/img/" + file_url, function (err, out) 
              if (err) 
                console.log("error", err);
               else 
                console.log("success");
                res.json(error_code:0,err_desc:null, file_url: 'img/'+file_url);
              
           );
        );
    );

/route.js

router.post('/api/adds', requests.addads);

/schema/ads.js

exports = module.exports = function(app, mongoose) 
     var addsSchema = new mongoose.Schema(
       imageTitle     :  type: String, default: '' ,    
       img            :  type: String, default: '' 

    );
    app.db.model('Adds', addsSchema);
  ;

【参考方案1】：

你需要在你的 nodeJS 后端使用 multer。

前端：

$('#myFormSubmit').click(function (e) 
    var formdata = new FormData()
    formdata.append('photo',$('#input-image').files[0])
    $.ajax(
        method : 'POST',
        processData : false,
        contentType : false,
        url : '/imageupload',
        data : formdata,
        success : function(o)
            //callback here on success
        ,
        error : function(e)
            //callback here on error
        
    )
);

后端（假设应用正在监听）：

var multer = require('multer')
var upload = multer(dest : 'uploads/').single('photo') 
//make sure you have access to write files
//make sure 'photo' matches up with the field entered at the front end e.g. formdata.append('photo', ...)

app.post('/imageupload',upload,function(req,res)
    //req.file will now be available as a json object, save to mongodb, re: filename, path etc
    res.send('rabbit')
)