文本-----富文本图片上传手工资料(上)实现图片上传和下载简单代码

简介: 文本-----富文本图片上传手工资料(上)实现图片上传和下载简单代码

最终期望看到的是图片能够存储了:

1、第一步要有上传的接口:先写一个接口,写一个FullTextController层

2、再写一个简单的基本结构: 定义一下文件保存路径

package zero.file.videoProject.controller;
 
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RequestMapping("/fullText")
@RestController
public class FullTextController {
    private static final String STORE_DIR = "D:\\project\\零一电科\\技术资料\\lingyidianke\\zeroBackEnd\\ZerosBackEnd\\src\\main\\resources\\pict\\";
    
}

3、再引入依赖:

<dependency>
     <groupId>commons-io</groupId>
     <artifactId>commons-io</artifactId>
     <version>2.11.0</version>
</dependency>

4、再写一个FullTextController上传文件的接口

package zero.file.videoProject.controller;
 
import org.apache.commons.io.FileUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
 
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;
 
@RequestMapping("/fullText")
@RestController
public class FullTextController {
    private static final String STORE_DIR = "D:\\project\\零一电科\\技术资料\\lingyidianke\\zeroBackEnd\\ZerosBackEnd\\src\\main\\resources\\pict\\";
    @RequestMapping("/file/upload")
    public Object uploadPict(@RequestParam("image") MultipartFile file) throws IOException {
        // 获取文件流
        // 获取文件真实名字
        String fileName = UUID.randomUUID().toString().substring(0, 10) + file.getOriginalFilename();
        // 在服务器中存储文件
        FileUtils.copyInputStreamToFile(file.getInputStream(), new File(STORE_DIR + fileName));
        // 返回图片url
       
    }
}

5、接下来图片访问url,写好domain的请求接口,本质这个URL是请求的下载的接口:

6、在编写上面之前,要写好下载文件的接口,编写接口的,下载接口的编写流程是保证编写的路径,找到之后,将他以流的形式的存储到文件当中:

7、写成这样就可以了

package zero.file.videoProject.controller;
 
import org.apache.commons.io.FileUtils;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
 
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
 
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.HashMap;
import java.util.UUID;
import javax.servlet.http.HttpServletResponse;
 
@RequestMapping("/fullText")
@RestController
public class FullTextController {
    private static final String STORE_DIR = "D:\\project\\零一电科\\技术资料\\lingyidianke\\zeroBackEnd\\ZerosBackEnd\\src\\main\\resources\\pict\\";
    private static final String DOMAIN = "http://localhost:9090/fullText/file/download/";
    static class Success {
        public final int errno;
        public final Object data;
        public Success(String url) {
            this.errno = 0;
            HashMap<String, String> map = new HashMap<>();
            map.put("url", url);
            this.data = map;
        }
    }
    @RequestMapping("/file/upload")
    public Object uploadPict(@RequestParam("image") MultipartFile file) throws IOException {
        // 获取文件流
        // 获取文件真实名字
        String fileName = UUID.randomUUID().toString().substring(0, 10) + file.getOriginalFilename();
        // 在服务器中存储文件
        FileUtils.copyInputStreamToFile(file.getInputStream(), new File(STORE_DIR + fileName));
        // 返回图片url
        String url = DOMAIN + fileName;
        return new Success(url);
    }
    @GetMapping("/file/download/{fileName}")
    public void download(@PathVariable("fileName") String fileName, HttpServletRequest request, HttpServletResponse response) {
        // 获取真实的文件路径
        String filePath = STORE_DIR + fileName;
        System.out.println("++++完整路径为:"+filePath);
        try {
            // 下载文件
            // 设置响应头
            response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
            response.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);
            // 读取文件内容并写入输出流
            Files.copy(Paths.get(filePath), response.getOutputStream());
            response.getOutputStream().flush();
        } catch (IOException e) {
            response.setStatus(404);
        }
    }
}

8、 写成这样,请求方式写成GET Params写成Body,form-data写成file,参数名为image

9、这样上传图片的接口就写好了


相关文章
针对FastAdmin新增上传多个图片,新增上传的视频的预览效果
针对FastAdmin新增上传多个图片,新增上传的视频的预览效果
815 0
|
存储 JSON JavaScript
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
探索基于pdf.js-dist开发的纯Javascript PDF批注插件库,支持保存、导出、导入和管理PDF文件中的批注。多个功能模块为您提供丰富的PDF注释体验。
564 0
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
|
3月前
|
Web App开发 Linux Windows
解决Markdown文件上传至CSDN无法显示本地图片问题-白嫖版,分享给别人的md文件图片不显示的解决方案
解决Markdown文件上传至CSDN无法显示本地图片问题-白嫖版,分享给别人的md文件图片不显示的解决方案
|
6月前
|
前端开发
表单设计器附件的上传、显示和下载
表单设计器附件的上传、显示和下载
44 1
表单设计器附件的上传、显示和下载
|
4月前
|
JavaScript
文本----简单编写文章的方法(上),自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑
文本----简单编写文章的方法(上),自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑
|
12月前
uniapp 文本复制及文件预览
uniapp 文本复制及文件预览
164 0
element组件库使用笔记---上传图片+回显+预览1.0
element组件库使用笔记---上传图片+回显+预览1.0
142 0
实现手动上传表单数据+图片文件
在很多项目中都会有上传数据+图片的需求,我最近在项目中负责活动发布的板块,需要几个表单数据加两个图片和一个图片数组,我看到产品需求后头就很大,我之前没有做过相关的业务,所以这几天一直在尝试,看到接口文档我内心已经崩了。
158 1
实现手动上传表单数据+图片文件
|
缓存 前端开发 JavaScript
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
1241 0