前端通过src获取java上传到Linux服务器的图片

前端通过src获取java上传到Linux服务器的图片

1、 首先通过xshell链接服务器,然后通过xftp模拟代替java代码上传图片到服务器指定地址,这里为了方便直接上传到/home目录下
在这里插入图片描述

我们找到nginx的配置文件,增加配置
实现效果:我们通过ip+端口+路径让他指向静态文件
当我们访问http://192.168.200.130/file/111.jpg可以访问到对应的图片
这里默认80端口,如果部署的boot项目,端口使用yml配置的端口
location /file/ {
        root   /;
        rewrite ^/file/(.*)$ /home/$1 break;
    }


修改完成后我们重启nginx,命令./nginx -t 需要在nginx的sbin目录下执行
这时候我们直接地址栏访问http://192.168.200.130/file/111.jpg效果如下
在这里插入图片描述
前端通过src也可直接访问
在这里插入图片描述

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Java微服务项目中使用Vue上传图片Linux服务器,您可以按照以下步骤进行操作: 1. 在Vue项目中,使用`vue-axios`或`axios`库来发送HTTP请求。确保您已经安装了这些库。 2. 在Vue组件中创建一个文件上传的表单,并添加一个文件选择器: ```html <template> <div> <input type="file" @change="uploadImage" /> </div> </template> ``` 3. 在Vue组件的方法中,使用`FormData`对象来创建一个表单数据,并将选择的文件附加到其中: ```javascript methods: { uploadImage(event) { const file = event.target.files[0]; const formData = new FormData(); formData.append('image', file); // 发送HTTP请求 axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => { // 处理成功响应 }) .catch(error => { // 处理错误响应 }); } } ``` 在这个例子中,我们使用了`axios.post`方法来发送POST请求,将文件数据作为表单数据发送到服务器的`/api/upload`接口。 4. 在Java微服务项目中,编写一个接口来处理文件上传的请求。您可以使用Spring Boot的MultipartFile来处理文件上传: ```java @PostMapping("/api/upload") public ResponseEntity<String> uploadImage(@RequestParam("image") MultipartFile image) { // 获取上传的文件名 String fileName = image.getOriginalFilename(); // 指定文件保存路径 String savePath = "/path/to/save/images/" + fileName; try { // 将文件保存到服务器 Path path = Paths.get(savePath); Files.write(path, image.getBytes()); return ResponseEntity.ok("文件上传成功"); } catch (IOException e) { return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("文件上传失败"); } } ``` 在这个例子中,我们使用了`@RequestParam`注解来接收上传的文件,并使用`Files.write`方法将文件保存到服务器指定的路径。 请注意,您需要根据实际情况修改保存路径和其他相关代码。 这样,当用户在Vue前端选择文件并触发上传动作时,文件将被发送到Java后端并保存到Linux服务器上。希望这个回答对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值