SSM项目上传图片到本地项目路径,target包里却没有图片?

SSM项目上传图片到本地项目路径,target包里却没有图片?

我的后台上传图片的代码是这样的:

@Controller
@Slf4j
public class FileController {
   

	private static final SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");

	public final String allowSuffix = ".bmp.jpg.jpeg.png.gif";

	// 根据实际修改图片存储路径
	
	public final String rootPath = "E:\\project_money\\project_test\\paimai1\\src\\main\\webapp\\assets\\img\\uploads\\images\\";


	@RequestMapping(value = "/file/upload", method = RequestMethod.POST)
	@ResponseBody
	public JsonResult jsonResult
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
首先,你需要在后端服务器上设置一个接收上传文件的 API 接口。在该接口中,你需要使用某个后端语言(如 PHP、Node.js、Python 等)来接收 POST 请求,并将上传的文件保存到服务器的指定目录下。例如,使用 Node.js 的 Express 框架实现的上传接口代码如下: ```javascript const express = require('express') const multer = require('multer') const app = express() // 设置上传文件存储路径和文件名规则 const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'public/images/') }, filename: function (req, file, cb) { cb(null, Date.now() + '-' + file.originalname) } }) // 创建上传实例 const upload = multer({ storage: storage }) // 处理上传请求 app.post('/upload', upload.single('file'), (req, res) => { res.send('File uploaded successfully!') }) // 启动服务器 app.listen(3000, () => { console.log('Server started on port 3000') }) ``` 在上面的代码中,我们使用了 Multer 中间件来处理上传请求,设置了上传文件的存储路径和文件名规则,并创建了一个 POST 接口 `/upload` 来处理上传请求。在上传成功后,我们向客户端返回一个成功提示信息。 接下来,在前端代码中,你需要使用 Vue.js 上传文件组件(如 Element UI 的 el-upload 组件)来实现文件上传,并将上传的文件发送到后端接口。例如,使用 Element UI 的 el-upload 组件实现的上传组件代码如下: ```vue <template> <el-upload class="upload-demo" action="/upload" :headers="{ 'Authorization': 'Bearer ' + token }" :on-success="handleUploadSuccess" :before-upload="beforeUpload"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> export default { data() { return { token: 'your_access_token' } }, methods: { beforeUpload(file) { // 设置上传文件的类型和大小限制 const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG) { this.$message.error('上传图片只能是 JPG 或 PNG 格式!') } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') } return isJPG && isLt2M }, handleUploadSuccess(response, file) { // 处理上传成功后的响应 console.log(response) } } } </script> ``` 在上面的代码中,我们使用了 Element UI 的 el-upload 组件来实现文件上传功能,并设置了上传文件的类型和大小限制。在上传成功后,我们可以通过 `handleUploadSuccess` 方法来处理上传成功后的响应。 需要注意的是,上传成功后的文件会被保存到服务器的指定目录下,而不是项目目录下。如果你想将上传的文件保存到项目目录下,你需要在后端代码中使用类似于 `fs` 模块之类的文件操作模块将上传的文件移动到项目目录下。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值