rw941123 2023-04-10 16:42 采纳率: 80%
浏览 35
已结题

上传图片后台文件夹不显示

我上传图片之后,后台的文件夹没有图片,数据库表的pictures里不是null,但是是空白的,也没有东西,请问是哪里有问题呢?麻烦大家帮我看一下,谢谢。

 <el-row>
                  <el-col :span="8">
                    <el-form-item label="物资图片" prop="unit">
                      <el-upload
                          accept="image/jpeg,image/png"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :before-remove="beforeRemove"
                          ref="upload"
                          :action="'http://localhost:8989/api/uploadImage'"
                          :http-request="upload"
                          :auto-upload="false"
                          :before-upload="onBeforeUpload"
                          multiple
                          :limit="1"
                          :on-exceed="handleExceed"
                          v-model="addForm.pictures">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过1M</div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
 
                <el-form-item>
                  <el-button type="primary" @click="addIn">立即捐赠</el-button>
                </el-form-item>
 
 
methods:{
    addIn() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return;
        const {data: res} = await this.$http.post("addIn2", this.addForm);
        if (res != "success") {
          return this.$message.error("捐赠失败~");
        }
        this.$message.success("捐赠成功~");
        this.addDialogVisible = false;
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }?`);
    },
    onBeforeUpload(file)
    {
      const isIMAGE = file.type === 'image/jpeg'||'image/png';
      const isLt1M = file.size / 1024 / 1024 < 1;
 
      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!');
      }
      return isIMAGE && isLt1M;
    },
    upload (file) {
      const _this = this
      let formdata = new FormData()
 
      // 上传图片并转成Base64编码
      formdata.append('files', file.file)
      console.log(formdata)
 
      this.$axios.post('/uploadImage', formdata).then((resp) => {
        if (resp.status === 200) {
          console.log(resp.data)
          // 设置图片回显
          _this.form.logo = resp.data
          _this.$message({type: 'success', message: '图片上传成功!'})
        }
      }).catch(() => {
        this.$message({type: 'info', message: '图片太大或格式有误,上传失败,请重新上传!'})
      })
    }
  }
}
 
 
 
@RestController
public class PicturesController {
 
    @RequestMapping(value = "/api/uploadImage", method = RequestMethod.POST)
    @ResponseBody
    public String uploadImage(@RequestParam("files") MultipartFile file) throws IOException {
        System.out.println(file.getOriginalFilename() + "图片已传入!!");
        byte[] b = file.getBytes();
        String fileName = file.getOriginalFilename();
        Path path = Paths.get("src/main/resources/pictures/" + fileName);
        Files.write(path, b);
        return fileName;
    }
 
 
}
 

  • 写回答

2条回答 默认 最新

  • 阿里嘎多学长 2023-04-10 17:29
    关注

    以下内容部分参考ChatGPT模型:


    问题分析:

    根据提问者的描述,图片已经上传成功,但是后台的文件夹没有图片,数据库表的pictures里不是null,但是是空白的,也没有东西。因此,问题可能出在后台对于上传图片的处理上。

    解决思路:

    1. 检查上传图片的路径是否正确。提问者的代码中,上传的路径为 "src/main/resources/pictures/",需要确保这个路径是存在的,且有写入权限。

    2. 检查上传图片时是否出现异常。可以在后台代码中打印日志,查看是否有异常信息。例如,可以在上传图片的方法中加入try-catch语句,捕获可能出现的异常信息,并打印到日志中。

    3. 检查上传图片的文件名是否有重复。如果上传的图片文件名与已存在的文件名相同,可能会覆盖原有的文件。可以在上传图片的方法中,对于文件名进行处理,避免重复。

    示例代码:

    @RestController
    public class PicturesController {
    
        @RequestMapping(value = "/api/uploadImage", method = RequestMethod.POST)
        @ResponseBody
        public String uploadImage(@RequestParam("files") MultipartFile file) throws IOException {
            System.out.println(file.getOriginalFilename() + "图片已传入!!");
            byte[] b = file.getBytes();
            String fileName = file.getOriginalFilename();
            File folder = new File("src/main/resources/pictures/");
            if (!folder.exists()) {
                folder.mkdirs();
            }
            File uploadFile = new File(folder, fileName);
            if (uploadFile.exists()) {
                String prefix = fileName.substring(0, fileName.lastIndexOf("."));
                String suffix = fileName.substring(fileName.lastIndexOf("."));
                fileName = prefix + "_" + System.currentTimeMillis() + suffix;
                uploadFile = new File(folder, fileName);
            }
            Files.write(uploadFile.toPath(), b);
            return fileName;
        }
    }
    

    在上面的代码中,我们对上传的文件名进行了处理,如果文件名已存在,就在文件名后面加上时间戳,避免文件名重复的问题。

    另外,我们还判断了文件夹是否存在,如果不存在,就创建文件夹。这样可以确保上传的文件夹是存在的。

    总结:

    以上就是对于上传图片后后台文件夹不显示的问题的解决思路和示例代码。需要注意的是,我们需要对上传的文件进行一些处理,避免出现重复的文件名等问题。同时,也需要确保上传的文件夹是存在的。


    如果我的建议对您有帮助、请点击采纳、祝您生活愉快

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月18日
  • 已采纳回答 4月10日
  • 创建了问题 4月10日

悬赏问题

  • ¥15 (标签-STM32|关键词-智能小车)
  • ¥20 关于#stm32#的问题,请各位专家解答!
  • ¥15 (标签-python)
  • ¥15 第一个已完成,求第二个做法
  • ¥20 搭建awx,试了很多版本都有错
  • ¥15 java corba的客户端该如何指定使用本地某个固定IP去连接服务端?
  • ¥15 activiti工作流问题,求解答
  • ¥15 有人写过RPA后台管理系统么?
  • ¥15 Bioage计算生物学年龄
  • ¥20 如何将FPGA Alveo U50恢复原来出厂设置哇?