图文上传demo

会编码的Snoopy

已于 2022-04-05 20:26:07 修改

阅读量667

点赞数 1

文章标签： intellij-idea java

于 2022-04-05 20:24:44 首次发布

本文链接：https://blog.csdn.net/CharlesSupreme/article/details/123976056

版权

文章目录

今天提交一个关于提交举报、提交问题等模块的图文上传demo，可用于多种模块
前端部分
- 2.后端部分
总结

今天提交一个关于提交举报、提交问题等模块的图文上传demo，可用于多种模块

首先我们来看一下界面，使用的是element-ui

在这里插入图片描述

正文

前端部分

图中涉及到的js引入等的问题需自己解决，也可私聊我，我打包发给你，留下一个赞即可。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>问题上传页</title>
    <script type=text/javascript src="/js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"/>
    <link href="/image/titleImg.jpg" rel="icon" type="image/x-icon" />
</head>
<body>
<div id="div1">
    请输入问题描述：
    <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"

            v-model="textarea1">
    </el-input>
    <el-upload accept="image/*" style="display: inline-block;"
               list-type="picture-card"
               multiple
               :file-list="fileList"
               :on-change="fileChange"
               :on-remove="fileRemove"
               :auto-upload="false"
               :limit=4>
        <i slot="default" class="el-icon-plus" v-if="num < 4"></i>
<!--        <el-button type="primary" plain v-if="num < 4">-->
<!--            <i class="el-icon-upload el-icon&#45;&#45;right"></i>点击选择图片-->
<!--        </el-button>-->
    </el-upload><br>
    <el-button @click="upload" type="primary">
        提交
    </el-button>

</div>


<script src="/js/vue/dist/vue.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script src="/js/axios/dist/axios.js"></script>
<script type="text/javascript">
new Vue({
    el: "#div1",
    data: {
        textarea1: '',
        fileList: [],
        num: ''
        // dialogImageUrl: '',
        // dialogVisible: false,
        // disabled: false
    },
    methods: {
         fileChange(file, fileList) {
             this.fileList = fileList;
             let i =this.fileList.length;
             this.num = i;
         },
        fileRemove(file,fileList) {
            this.fileList = fileList;
            let i =this.fileList.length;
            this.num = i;
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        upload(){
             let i =this.fileList.length;
             this.num = i;
             alert(i);
             let form = new FormData();
             form.append('describe',this.textarea1);
             this.fileList.forEach(file => {
                 form.append('file',file.raw)
             });
            axios.post('http://localhost:3060/question/upload', form, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
                if (res.data.success === true) {
                    alert(res.data.msg);
                    window.location.href = "http://localhost:3060/page/questionUpload"
                }else{
                    alert(res.data.msg)
                }
            }).catch(error => {
                alert('啊哦，出错了，请检查后再试')
            })
        }
    }
})

</script>
</body>
</html>

2.后端部分

这里主要给出Controller层的代码，做一个参考，如果不懂可以留言，我会尽量解答，其他文件就和平常一样创建即可

package com.chj.img_test.controller;

import com.chj.img_test.config.FileRename;
import com.chj.img_test.entity.Question;
import com.chj.img_test.service.QuestionService;
import com.chj.img_test.vo.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.UUID;

@Controller
@RequestMapping("/question")
public class QuestionController {
    @Autowired
    private QuestionService questionService;
    @RequestMapping("/test")
    @ResponseBody
    public String test(){
        return "123";
    }
    @RequestMapping("/upload")
    @ResponseBody
    public R fileUpload(@RequestParam("file") List<MultipartFile> files, HttpServletRequest req,Question question){
        R r = new R("提交失败",false,null);
        String describe = req.getParameter("describe");
        System.out.println(describe);
        int size = files.size();
        System.out.println("size="+size);
        String[] fileNameArr = new String[size];
        int size1 = size;
        for (MultipartFile file: files) {
            System.out.println(file.getOriginalFilename());
            fileNameArr[--size1] = fileRename(file);
        }
        question.setQDescribe(describe);
        question.setUserId(1);
//        question.setQId(1);
//        question.setIsDel("0");
        if(size > 0) {
            if (fileNameArr[0] != null) {
                question.setQImg1(fileNameArr[0]);
            }
        }
        if(size > 1){
        if (fileNameArr[1] != null){
            question.setQImg2(fileNameArr[1]);
        }
        }
        if(size > 2){
        if (fileNameArr[2] != null){
            question.setQImg3(fileNameArr[2]);
        }
        }
        if(size > 3){
        if (fileNameArr[3] != null){
            question.setQImg4(fileNameArr[3]);
        }
        }
        System.out.println("question="+question);
        int i = questionService.addQuestion(question);
        //System.out.println("++");
        if (i > 0){
            r.setMsg("提交成功");
            r.setSuccess(true);
        }
        return r;
    }
    public String fileRename(MultipartFile file) {
        if (file.isEmpty()) {
            System.out.println("文件为空");
        }
        String fileName = file.getOriginalFilename();  // 文件名
        //System.out.println(fileName);
        assert fileName != null;
        String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 后缀名
        String filePath = "E://temp-rainy//"; // 上传后的路径
        SimpleDateFormat sdf = new SimpleDateFormat( "yyyy-MM-dd-HH-mm-ss" );
        fileName = sdf.format(new Date())+"+"+UUID.randomUUID() + suffixName; // 新文件名
        File dest = new File(filePath + fileName);
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdirs();
        }
        try {
            file.transferTo(dest);
        } catch (IOException e) {
            e.printStackTrace();
        }
        //System.out.println("/temp-rainy/" + fileName);
        //System.out.println(filename);
        return "/temp-rainy/" + fileName;
    }
}

全部编写完毕可以访问http://localhost:3060/page/questionUpload到上传界面

总结

提示：Java上传文件必不可少的三个依赖（不是）

    <dependency>
        <groupId>commons-net</groupId>
        <artifactId>commons-net</artifactId>
        <version>3.3</version>
    </dependency>

    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.1</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3</version>
    </dependency>

另外如果有疑惑或者需要其他的文件（例如pom.xml、实体类、dao、以及一些配置类等的、都可在下方评论，我看到了都会发）