springBoot的文件上传和回显

首先要注意的是使用什么技术栈,如果使用ssm框架的就不用看了(我自己就是将ssm框架的工具包直接拿来用,后来发现错了,别走我的老路)。

文件上传的位置在后端服务器中,前端服务器不在本地,我是采用IIS管理器的子虚拟目录来实现前端可以通过url来获取文件,具体步骤如下:

后端文件上传

    //获取yml中的文件上传地址
    @Value("${windows.path}")
    private String filePath;
    @Value("${windows.httpimg}")
    private String ip;

    @Resource
    private UpYunConfig upYunConfig;


 本地保存图片

    @PostMapping("/upload/target")
    public ResultVo upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {
        //将文件存储到本地磁盘中,在ymal文件中配置上传地址
        File isfile=new File(filePath);
//        判断文件夹是否存在,不存在创建
        if (isfile.exists()) {
            System.out.println("file already exists: " + isfile);
        } else {
            boolean created = isfile.mkdirs();
            if (created) {
                System.out.println("Folder created: " + isfile);
            } else {
                System.out.println("Failed to create folder: " + isfile);
            }
        }
        //获取文件扩展名
        String originalFilename = file.getOriginalFilename();
        int index = originalFilename.lastIndexOf('.');
        String extname = originalFilename.substring(index);
        String newFileName = UUID.randomUUID().toString() + extname;
        log.info("新的文件名:{}",newFileName);
        //存储地址
        file.transferTo(new File(filePath + newFileName));
将虚拟地址+文件名称的数据返回前端,前端提交表单后一起将数据保存
        return ResultVo.success(ip+"/"+newFileName);
    }

iis

具体步骤如下;

先在开始搜索框中搜索“控制面板”

选择程序和功能

点击启用或关闭windows功能;

找到Internet Information Services 并且将FTP服务器、web管理工具、万维网服务都选上,点击确定就可以了。

之后就可以在开始搜索框中搜索iis就有相应的程序了

找到下图的添加虚拟目录

设置参数,选择确定,虚拟目录就建好了

查看iis的文件

想要查看子虚拟目录的URL地址就在iis管理器中,在左边选中虚拟目录(img),在右边点击“浏览*.80(http)

你就会看到这样的页面,现在就可以直接使用URL再加文件名的形式获取到响应的文件了。

HTTP 错误 401.3 - Unauthorized

注意:IIS管理器的子虚拟目录是可以直接靠地址栏访问的,这个可以直接测试保存的数据是否有效,如果报了HTTP 错误 401.3 - Unauthorized,说明你的文件访问控制表(ACL)没有设置好具体的可以看这个,

http://t.csdnimg.cn/ZtGht

前端

之后就可以直接在前端直接可以用src和href进行获取。

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,请问您需要哪方面的帮助呢? 一般来说,vue可以使用axios或者fetch等ajax库发送文件请求,而springboot则可以使用Spring MVC的方式来处理上传文件请求。 上传文件的核心是FormData对象,可以使用它来构造包含文件数据的请求体。在vue中,我们可以使用如下代码来上传文件: ``` <template> <div> <input type="file" ref="file" @change="handleFileChange"> <button @click="handleUpload">上传</button> </div> </template> <script> import axios from 'axios' export default { methods: { handleFileChange() { // 获取文件对象 this.file = this.$refs.file.files[0] }, handleUpload() { // 构造FormData对象 const formData = new FormData() formData.append('file', this.file) axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => { // 上传成功,处理回调 }) .catch(error => { // 上传失败,处理错误 }) } } } </script> ``` 在上面的代码中,我们使用了input元素的type为file的属性来获取用户选择的文件,然后构造了一个含有文件数据的FormData对象,并使用axios库发送了post请求到服务器的/upload路径。注意需要设置请求头Content-Type为multipart/form-data。 在服务器端,我们可以使用Spring MVC中的MultipartFile类型来接收文件。一个简单的springboot上传文件的代码示例: ``` import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; @RestController public class FileController { @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) { try { // 将文件保存到本地 file.transferTo(new File("保存路径")); // 返回上传成功的消息 return "上传成功!"; } catch (IOException e) { // 返回上传失败的消息 return "上传失败!"; } } } ``` 在上面的代码中,我们使用了@PostMapping注解来接收POST请求,并使用@RequestParam注解来指定上传文件的参数名称。在方法内部,我们通过调用MultipartFile类型的transferTo方法来将文件保存到本地。注意需要处理文件保存失败的情况,并返回对应的消息。 至于如何将保存的文件回显到前端页面上,可以通过返回上传后的文件路径或者URL,并在前端页面上使用img或video等元素来显示文件。如果需要更加复杂的文件上传、处理、回显等操作,可以使用一些上传组件或者库来辅助完成。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值