SpringBoot は写真とエコーをアップロードし、フォルダーを正常にアップロードできませんが、パスが 404 を報告し、フォルダーにアップロードできますが、エコーが出ません。

SpringBoot は写真とエコーをアップロードし、フォルダーを正常にアップロードできませんが、パスが 404 を報告し、フォルダーにアップロードできますが、エコーが出ません。

ブログを書くのは初めてなので上手く書けないかもしれませんが、皆さんお付き合いいただければ幸いです

1. これはフロントエンドページです

ここに画像の説明を挿入

1、首先是我们选择照片后的点击确定的时候会执行beforeAvatarUpload进行一个前置验证,
验证图片的大小格式,就不细说了,然后通过action执行controller层的方法,放在下面了,
beforeAvatarUpload这个是执行完controller的方法后返回的结果拼接后去访问文件夹的
进行照片的回显,下面会。
// An highlighted block
<el-row>
                                <el-col :push="8" :span="6">
                                    <el-form-item label="个人照片">
                                        <el-upload
                                                class="avatar-uploader"
                                                action="/setPic/loginUpload"
                                                :auto-upload="autoUpload"
                                                name="imgFile"
                                                :show-file-list="false"
                                                :on-success="handleAvatarSuccess"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </el-form-item>
                                </el-col>
                            </el-row>
2、这个就是Controller层了,就是接收前端的imgFile,文件的名字,进行格式的分割,
加上UUID拼接成新的名字,最后通过multipartFile上传到我们设定的文件夹下面,如果
上传成功,我返回的是是一个封装好的类,成功的话将我们的fileName返回传递给前端
进行拼接
 //    注册图片的上传
    @RequestMapping("/setPic/loginUpload")
    public Result upload(@RequestParam("imgFile") MultipartFile multipartFile) {
    
    
        String originalFilename = multipartFile.getOriginalFilename();
        int lastIndexOf = originalFilename.lastIndexOf(".");
        //获取文件后缀
        String suffix = originalFilename.substring(lastIndexOf - 1);
        String fileName  = UUID.randomUUID().toString()+suffix;
        File file = new File("D:/upload/registPic/",fileName);
        try {
    
    
            multipartFile.transferTo(file);
        } catch (Exception e) {
    
    
            e.printStackTrace();
            return new Result(false, MessageConstant.PIC_UPLOAD_FAIL);
        }
        return new Result(true,MessageConstant.PIC_UPLOAD_SUCCESS,fileName);
    }
3、我们这里response接收传递过来的新图片文件的名称,this.imageUrl就是我们1、里面设
置的照片的显示路径,拼接完成后就可以在视图解析器里面进行配置了,下面说。
this.formData.img=response.data;这个是将我们的照片名称放入到formData.img下面提供
我们将最后的全部数据传给数据库,这个就不细说了,重点不是这个。setPicImg这个
的路径名字是随便设定的不一定要和我们1中acton中的路径一样,我们是为了方便下面视图解析
用的,下面介绍
//文件上传成功后的钩子,response为服务端返回的值,file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) {
    
    
                console.log("response.data");
                this.imageUrl="http://localhost:8080/setPicImg/"+response.data;
                this.formData.img=response.data;
            },
4、public class MyWebMvcConfigurer implements WebMvcConfigurer 我们创建个这个类,
大家应该都知道这个是视图解析器,我们拦截所有的/setPicImg/**路径(这个不就是我们)然
后将他去我们设定好的文件夹去访问我们的图片文件。这样的话我们的图片就能成功回显啦!!!
@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
    
    
        registry.addResourceHandler("/setPicImg/**").addResourceLocations("file:D:/upload/registPic/");
    }

要約する

1. 私の問題: 写真ファイルはフォルダーに正常にアップロードできますが、http://localhost:8080/setPic/loginUpload でエラー 404 が報告されます。これは、写真がフォルダーに正常にアップロードされているためではありません。このパスの 404 を報告します。

这个的解决方法是我的Controller层的类前没有加@RespondBody。也可以直接加@RestController
所以返回的数据格式不是json格式的数据,前端就没有办法接收到,所以错误报在了这个的路径下,
而文件能够正常上传到文件夹。

2. 他の問題の 404 である場合は、パスに問題があると考えられます。パスに不足している問題がないか確認するか、メッセージを残していただければお手伝いします。

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/qq_51753851/article/details/121745374