跨域和上传文件

最新推荐文章于 2023-07-20 20:38:21 发布

yakelande

最新推荐文章于 2023-07-20 20:38:21 发布

阅读量3.8k

点赞数

分类专栏： JS 文章标签：跨域上传文件 ajax 上传图片服务器跨域

本文链接：https://blog.youkuaiyun.com/yakelande/article/details/79529071

版权

JS 专栏收录该内容

39 篇文章

订阅专栏

本文探讨了跨域问题，详细介绍了两种服务器解决方案，并专注于使用AJAX进行图片上传，包括图片预览和服务器端处理的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 跨域

服务器方式一

app.all('*',function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (req.method == 'OPTIONS') {
        res.sendStatus(200); //让options请求快速返回/
    }
    else {
        next();
    }
});

服务器方式二

npm install cors

var cors=require('cors');

//<!--在路由之前导入-->

app.use(cors({
    origin:['http://localhost'],
    methods:['GET','POST'],
    alloweHeaders:['Conten-Type', 'Authorization']
}));

客户端

    $.ajax({
        type:'post',
        url:'http://localhost:3000/users/login',
        data:$('#login_form').serialize(),
        dataType:'json',
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        success:function (result) {
        },
        error:function (err) {
 
        }
                })

3.ajax 上传图片

图片预览

 #upload_file{
       display: block;
       width: 200px;
       height: 200px;
       position: relative;
       z-index: 1;
       opacity: 0;
   }
   #preview{
       width: 200px;
       height: 200px;
       background: grey;
       position: relative;
       top: -200px;
       z-index: 0;
   }
   #preview img{
       width: 100%;
       height: 100%;
       object-fit: fill;
       object-position: center 100px;
   }
   
   
 $('#upload_file').change(function (e) {
                var file = e.target.files[0];
                preview1(file);
            })
            function preview1(file) {
                var img = new Image();
                img.src = URL.createObjectURL(file);
                var url = img.src;
                var $img = $(img);
                img.onload = function () {
                    URL.revokeObjectURL(url);
                    $('#preview').empty().append($img);
                }
            }

提交图片

var formData = new FormData($( "#uploadForm" )[0]);  
     $.ajax({  
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
          type: 'POST',  
          data: formData,  
          async: false,  
          cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });

服务器端代码

var express = require('express');
var router = express.Router();
var util = require('./../utils/util');
var formidable = require('formidable');
var fs=require('fs');
var AVATAR_UPLOAD_FOLDER='/uploads/'
router.post('/upload', function (request, response, next) {
    var form = new formidable.IncomingForm();   //创建上传表单
    form.encoding = 'utf-8';        //设置编码
    form.parse(request, function (err, fields, files) {
        if (err) {
            response.locals.error = err;
            response.render("uploads error");
            return;
        }
        var extName = '';  //后缀名console.log('files.in_file.type: '+files.in_file.type);
        switch (files.user_icon.type) {
            case 'image/jpeg':
                extName = 'jpeg';
                break;
            case 'image/jpg':
                extName = 'jpg';
                break;
            case 'image/png':
                extName = 'png';
                break;
            case 'image/x-png':
                extName = 'png';
                break;
        }
        if(extName.length == 0){
            return;
        } else{
            form.uploadDir = "../public"+AVATAR_UPLOAD_FOLDER;     //设置上传目录
            form.keepExtensions = true;     //保留后缀
            form.maxFieldsSize = 2 * 1024;   //文件大小
            var avatarName = Math.random() + '.' + extName;
            var newPath = form.uploadDir + avatarName;
            console.log("old"+files.user_icon.path);
            console.log("newpath---"+newPath);
            var fff=fs.renameSync(files.user_icon.path, newPath);  //重命名


            response.send('uploads');
        }

    })

    });

    module.exports = router;