前后端服务器分离时，前端如何上传图片到前端服务器？

Question

前端如何把图片上传到服务端?

使用技术：vue2 + elementUI

背景：

前端和后端分别部署到不同的服务器上，前端页面是个表单, 表单里面有上传图片的功能，上传的图片然后在其他页面展示的业务逻辑。后台提供的表单接口要求我只把图片名字(xxxx.png/xxx.jpg)传给他。

问题：

我把生产包放到nginx里的html文件夹后测试。发现没法上传。nginx的配置也做过修改了
vue：

                  <el-upload
                        class="avatar-uploader"
                        :action="action"
                        accept="image/jpg,image/jpeg,image/png"
                        list-type="picture-card"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :on-change="handleChange"
                      >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

 data() {
        return {
            imageUrl: '',
             action: window.NODE_ENV === 'development' ? '' : window.location.origin + '/common/image/'
        }
    },
  methods: {
         handleChange(file) {
            console.log('file', file);
            this.imageUrl = URL.createObjectURL(file.raw)
        }
         handleAvatarSuccess(res, file) {
            // console.log('res',res)
            // console.log(file)
  
        },
        beforeAvatarUpload(file) {
            
        },
  }

nginx配置

server {
    listen 8085;
    server_name  10.19.129.12:19090;   # 127.0.0.1 #10.19.129.12:19090
    charset utf-8;
    access_log  on; 

    add_header Access-Control-Allow-Origin '*';
    add_header Access-Control-Allow-Methods 'POST,PUT,GET,DELETE';
    add_header Access-Control-Allow-Headers 'version, access-token, user-token, Accept, apiAuth, User-Agent, Keep-Alive, Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With';

    #  前端vue转发  或者是/dist/
    location /dist/ {
        root  html;
        rewrite /(.*)$ /$1 break;
        index  login.html index.html index.htm;   #启动文件
     }  
 location /common/image/ {
          root  D:/codes/nginx-1.18.0/;
      index  index.html index.htm;
     }
   
}

结果：

生产环境下上传图片报错了:

目录：

尝试1：传给后台的图片名字是base64，展示的时候后台再返回base64，但是加载太慢没有通过验收
尝试2：我手动把图片复制到'/common/image/'文件夹下，展示的时候是可以展示的。

    img可以展示：
  <img class="cardImg" :src="imgSrc">
 data() {
        return { // coverPhotoName是后台返回的图片名字
            imgSrc:  window.location.origin + '/common/image/' + coverPhotoName
      }
}

请问我应该怎么修改代码才能做到把图片上传到'/common/image/'文件夹下？如果我提供的信息太少可以积极指正，谢谢各位大佬🥰

Answer 1

给你提供个大概得思路

1.先要准备一个后台上传服务。用java、node等等都可以实现。

你这里提到了纯前端，我以node为例子,假设你的文件要保存到服务器的/home/uploads目录下

const http = require('http');
const fs = require('fs');
const path = require('path');
const formidable = require('formidable');

const server = http.createServer((req, res) => {
    if (req.method === 'POST' && req.url === '/upload') {
        const form = new formidable.IncomingForm();
        
        form.parse(req, (err, fields, files) => {
            if (err) {
                console.error('文件解析失败:', err);
                res.writeHead(500, {'Content-Type': 'text/plain'});
                res.end('文件解析失败');
                return;
            }

            const uploadDir = './uploads';
            if (!fs.existsSync(uploadDir)) {
                fs.mkdirSync(uploadDir);
            }

            const fileName = fields.fileName; // 获取前端传递过来的文件名

            const filePath = path.join(uploadDir, fileName); // 使用前端传递的文件名
            const writeStream = fs.createWriteStream(filePath);

            fs.createReadStream(files.file.path).pipe(writeStream);
            writeStream.on('close', () => {
                console.log('文件上传成功:', filePath);
                res.writeHead(200, {'Content-Type': 'text/plain'});
                res.end('文件上传成功');
            });
        });
    } else {
        res.writeHead(404, {'Content-Type': 'text/plain'});
        res.end('Not Found');
    }
});

const PORT = 3000;
server.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

2.配置nginx的转发。

转发上传接口、配置静态文件访问

#转发上传接口
 location /upload {
        proxy_pass http://localhost:3000/upload;
 }
#配置静态文件访问
location /oss/ {
        alias /home/upload/;
        autoindex on;  # 打开目录浏览功能，可选
 }

3.前端axios上传

  const formData = new FormData();
  formData.append('file', file);
 axios.post('/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
        params: {
            fileName: fileName // 将文件名作为请求参数传递给后端
        }
  })

4.你的文件地址就是你的nginx的domain+/oss/你的上传的文件名

---

我只是给你大概列个思路，具体代码你可以gpt或者网上找示例

Answer 2

上传组件使用错误，最终再上传时没调用正确的上传接口，采用了locaiton.orgin + 'path'的方式，访问的是你本地，你本地没有上传的接口服务文件肯定上传不了，再说一下403，请求的路径就是你的nginx配置路径，在无完整路径情况下请求是被拒绝的，相当于你上传文件的接口变成了不完整的静态路径