rw941123 2023-04-12 23:24 采纳率: 80%
浏览 135
已结题

TypeError: Cannot read properties of undefined (reading ‘post‘)

在点击立即捐赠按钮之后浏览器报错,我查了一下说是vue没有axios,但是我有,麻烦大家帮我看看是哪里的代码有问题呢?

img

<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-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
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
 
                <el-form-item>
                  <el-button type="primary" @click="addIn">立即捐赠</el-button>
                </el-form-item>
 
 upload (file) {
      const _this = this
      let formdata = new FormData()
 
      // 上传图片并返回路径
      formdata.append('pictures', file.file)
      this.$axios.post('/uploadImage', formdata, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }}).then((resp) => {
        if (resp.status === 200) {
          console.log(resp.data)
          // this.addForm.pictures = resp.data;
          // 设置图片回显
          _this.form.f_logo = resp.data
          _this.$message({type: 'success', message: '图片上传成功!'})
        }
      }).catch(() => {
        this.$message({type: 'info', message: '图片太大或格式有误,上传失败,请重新上传!'})
      })
    }
 
 
 final static String PIC_PATH = "pictures/";
 
        @PostMapping("/api/uploadImage")
        public String uploadImage(MultipartHttpServletRequest multiRequest, HttpServletRequest request){
                System.out.println("上传图片");
                SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd"); //生成日期格式
                String datePrefix = dateFormat.format(new Date()); //生成当前日期作为前缀
                String savePath = "src/main/resources/" + PIC_PATH; // 存储路径
 
                File folder = new File(savePath+datePrefix); //生成带当前日期的文件路径
 
                if(!folder.isDirectory()){
                        folder.mkdirs();
                }
 
                String randomName = Objects.requireNonNull(multiRequest.getFile("pictures")).getOriginalFilename(); //获取图片名
                //生成随机数确保唯一性,并加上图片后缀
                assert randomName != null;
                String saveName = UUID.randomUUID().toString() + randomName.substring(randomName.lastIndexOf("."),randomName.length());
                String absolutePath = folder.getAbsolutePath(); //转换成绝对路径
 
                try {
                        File fileToSave = new File(absolutePath + File.separator + saveName);
                        Objects.requireNonNull(multiRequest.getFile("pictures")).transferTo(fileToSave); // 图片存储到服务端
                        String returnPath = request.getScheme() + "://" + request.getServerName()+":"+request.getServerPort() + "/pictures/" + datePrefix +"/"+ saveName;
 
                        return returnPath;
 
                }catch (Exception e){
                        e.printStackTrace();
                }
                return null;
        }
 
 @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("Http://localhost:8080","null")
                .allowedMethods("GET","POST","PUT","OPTIONS","DELETE")
                .allowCredentials(true)
                .allowedHeaders("*")
                .maxAge(3600);
    }
 
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/pictures/**")
                .addResourceLocations("file:" + System.getProperty("user.dir")+"\\src\\main\\resources\\pictures\\");
 
    }
}
 
## 静态资源访问路径
spring.mvc.static-path-pattern=/**
## 静态资源映射路径
web.resources.static-locations=classpath:/


  • 写回答

2条回答 默认 最新

  • 白云苍狗い 2023-04-13 08:50
    关注

    上回的上传报错问题好了吗.我记得你上次用的是$http.怎么这么换成$axios, 有没有 你可以打印看看

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

报告相同问题?

问题事件

  • 系统已结题 4月21日
  • 已采纳回答 4月13日
  • 创建了问题 4月12日

悬赏问题

  • ¥50 关于#微信小程序#的问题:微信小程序支持h5实现webrtc h264 h265低延迟传输渲染,能付费帮我们解决一下吗
  • ¥20 请问ansys License manager 这个问题如何解决
  • ¥15 memory.limit()' is no longer supported
  • ¥15 基于stm32f4产生两路pwm信号并可由串口通信调节
  • ¥15 C++/QT设置函数调用条件(多个功能调用同一,且各自调用条件不同)
  • ¥15 UE5样条线生成的网格UV问题
  • ¥15 如何用最短的时间大致看懂springboot+vue的项目
  • ¥15 (有偿)懂数值分析和含时变参数微分方程的来
  • ¥15 abaqus随机生成二维颗粒
  • ¥15 安装ansys许可证管理器时出现了这个问题,如何解决?