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

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

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

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、这样上传图片的接口就写好了


相关文章
|
小程序 API
微信小程序如何点击按钮,复制文本到粘贴板
微信小程序如何点击按钮,复制文本到粘贴板
微信小程序如何点击按钮,复制文本到粘贴板
|
4月前
|
Web App开发 Linux Windows
解决Markdown文件上传至CSDN无法显示本地图片问题-白嫖版,分享给别人的md文件图片不显示的解决方案
解决Markdown文件上传至CSDN无法显示本地图片问题-白嫖版,分享给别人的md文件图片不显示的解决方案
120 3
|
7月前
|
前端开发
表单设计器附件的上传、显示和下载
表单设计器附件的上传、显示和下载
48 1
表单设计器附件的上传、显示和下载
|
7月前
|
文字识别 JavaScript API
Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。
Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。
|
7月前
|
JavaScript
(简单成功)原生js实现点击复制文本
(简单成功)原生js实现点击复制文本
75 0
uniapp 文本复制及文件预览
uniapp 文本复制及文件预览
174 0
电脑报错弹窗文本内容复制,Textify
使用电脑的过程中,软件多起来难免会出现一些莫名其妙的错误弹窗,有的是运行错误,有的是缺少依赖,有的是软硬件故障……就比如弹出的缺少.dll库的问题
112 1
实现手动上传表单数据+图片文件
在很多项目中都会有上传数据+图片的需求,我最近在项目中负责活动发布的板块,需要几个表单数据加两个图片和一个图片数组,我看到产品需求后头就很大,我之前没有做过相关的业务,所以这几天一直在尝试,看到接口文档我内心已经崩了。
167 1
实现手动上传表单数据+图片文件
|
缓存 前端开发 JavaScript
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
1293 0