同时上传图片与文字

本文介绍了一种利用commons-fileupload和commons-io库实现的图文混合上传方案,详细展示了如何通过ServletFileUpload解析请求并处理文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现文本与图片同时上传:

首先上传文字内容比较简单,而上传图片的话比较麻烦,这里可以从网上下载commons-fileupload-1.3.1,commons-io-2.4两个jar包,

上传具体实现类代码如下:

public class TombServiceImpl implements TombService {
    ITombDao tombDao = new TombDao();//创建对象为后面调用dao层方法
    //图片等材料上传
    @Override
    public void upload(HttpServletRequest request, HttpServletResponse response) {
        try {
            request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
        } catch (Exception e) {
            e.printStackTrace();
        }
	//声明其他属性变量
        String tombName = null;
        Double tombPrice = null;
        String tombSummary = null;
        //判断本次表单是否是一个multipart表单(带含文件上传)
        boolean isMultipart = ServletFileUpload.isMultipartContent(request);
        if (isMultipart) {
            //文件保存路径
            String savePath = request.getSession().getServletContext().getRealPath("/") + "upload/";
            //相对路径
            String path = "/tomb/upload/";
            //获取工厂对象
            DiskFileItemFactory factory = new DiskFileItemFactory();
            //设置缓冲区大小,单位字节
            factory.setSizeThreshold(1024 * 4);
            //产生servlet上传对象
            ServletFileUpload uploader = new ServletFileUpload(factory);
            uploader.setHeaderEncoding("UTF-8");
            //设置上传文件的最大大小,位置字节
            uploader.setSizeMax(4 * 1024 * 1024);
            //获取表单项
            try {
                List<FileItem> fileItems = uploader.parseRequest(request);
                String pictures_url = "";
                for (FileItem item : fileItems) {
                    //判断表单项是普通字段还是上传项
                    if (item.isFormField()) {
                        if ("tombName".equals(item.getFieldName())) {
                            tombName = item.getString("UTF-8");
                        } else if ("tombPrice".equals(item.getFieldName())) {
                            tombPrice = Double.valueOf(item.getString("UTF-8"));
                        } else {
                            tombSummary = item.getString("UTF-8");
                        }
                    } else {
                        //上传项目
                        String fileName = item.getName();
                        File file = new File(savePath + tombName + "/");//一个用户名下面存放多张图片
                        if (!file.exists()) {
                            file.mkdirs();
                        }
			//这里保存图片是保存的相对路径,方便其他用户使用
String wirteFile_url = savePath + tombName + "/" + fileName; File wirteFile = new File(wirteFile_url); //写入文件对象 item.write(wirteFile); //如果有多个图片,拼接图片 String picture_url = path + tombName + "/" + fileName; pictures_url += picture_url; pictures_url += ";"; } }
		//上传参数
                Tomb tomb = new Tomb();
                tomb.setTombName(tombName);
                tomb.setTombPrice(tombPrice);
                tomb.setTombSummary(tombSummary);
                tomb.setTombPicture(pictures_url);
                tombDao.add(tomb);
            } catch (FileUploadException e) {
                e.printStackTrace();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
servlet如下:
public class TombUpdateServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        TombService tombService=new TombServiceImpl();
        tombService.upload(request,response);//调用上面实现类的方法
    }
}
Dao层方法都很相似,就是相关的增删改查,这里只解释后台操作,是典型的MVC结构(servlet+jsp+JDBC+JavaBean+DAO+Mysql)

### Vue3 Node.js 中实现同时上传图片文字 在现代 Web 应用开发中,Vue3 提供了强大的组件化能力以及响应式数据绑定功能,而 Node.js 则作为后端服务处理文件其他数据的接收存储。以下是通过 Vue3 前端发送图片文字到 Node.js 后端的具体实现方式。 #### 1. **前端部分 (Vue3)** Vue3 的 `v-model` 可以轻松管理表单输入的数据,同时利用 HTML5 的 `<input type="file">` 来获取用户选择的文件并将其转换为 FormData 对象以便提交给服务器。 ```javascript <template> <form @submit.prevent="handleSubmit"> <!-- 文字输入框 --> <label>请输入文字:</label> <input v-model="textData" placeholder="在这里输入文字..." /> <!-- 文件上传控件 --> <label>请选择图片:</label> <input type="file" ref="fileInput" @change="handleFileChange" accept="image/*" /> <!-- 提交按钮 --> <button type="submit">上传</button> </form> </template> <script> import axios from 'axios'; export default { data() { return { textData: '', // 存储用户输入的文字 selectedFile: null, // 存储用户选择的文件对象 }; }, methods: { handleFileChange(event) { this.selectedFile = event.target.files[0]; // 获取选中的第一个文件 }, async handleSubmit() { const formData = new FormData(); // 创建 FormData 实例 formData.append('text', this.textData); // 添加文字字段 formData.append('file', this.selectedFile); // 添加文件字段 try { await axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' }, // 设置请求头 }); alert('上传成功!'); } catch (error) { console.error(error); alert('上传失败,请重试'); } }, }, }; </script> ``` 上述代码实现了以下逻辑: - 用户可以通过输入框填写文字[^1]。 - 使用 `<input type="file">` 控制器让用户选择一张图片,并监听其变化事件来捕获所选文件[^2]。 - 当点击“上传”按钮时,会创建一个 `FormData` 对象并将文字文件附加进去,最后通过 Axios 发送到指定 URL `/upload` 处理。 #### 2. **后端部分 (Node.js with Express)** 为了支持多部分内容类型的 POST 请求(即包含文本二进制文件),推荐使用 Multer 中间件解析 multipart/form-data 格式的 HTTP 请求体。 安装依赖库: ```bash npm install express multer cors body-parser ``` 编写路由处理器如下所示: ```javascript const express = require('express'); const multer = require('multer'); // 解析上传文件中间件 const path = require('path'); // 初始化应用实例 const app = express(); app.use(express.json()); // JSON 数据解析 app.use(cors()); // 跨域资源共享设置 // 配置 Multer 存储选项 const storage = multer.diskStorage({ destination(req, file, cb) { cb(null, './uploads/'); // 定义保存目录 }, filename(req, file, cb) { cb( null, `${Date.now()}-${Math.round(Math.random() * 1e9)}${path.extname(file.originalname)}` ); // 自定义命名规则防止覆盖冲突 }, }); // 初始化 Multer 单文件上传配置 const upload = multer({ storage }); // 图片文字上传接口 app.post('/upload', upload.single('file'), (req, res) => { const uploadedText = req.body.text || ''; // 获取传来的文本参数 const filePath = req.file ? req.file.path : ''; // 如果有则返回路径否则为空字符串 res.status(200).json({ success: true, message: '上传完成', result: { text: uploadedText, imageUrl: filePath.replace(/\\/g, '/').replace(/^\.\/public/, ''), // 返回可访问链接地址 }, }); }); // 开启服务监听端口8080 const PORT = process.env.PORT || 8080; app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`) ); ``` 此脚本完成了这些操作: - 设定了一个简单的 RESTful API 接收来自客户端发过来的内容。 - 使用 Multer 将接收到的图像存放到本地磁盘上的特定位置。 - 把关联的信息打包成 JSON 形式反馈回去告知调用方结果状态及详情信息。 #### 总结说明 以上展示了完整的前后端交互流程,从前端收集必要的资料直到它们被安全可靠地送达目的地为止。值得注意的是,在实际部署过程中还需要考虑安全性因素比如验证身份认证机制、限制允许的最大尺寸大小等等额外措施保障整个系统的稳健运行。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值