fetch上传图片问题

最新推荐文章于 2024-08-14 00:13:39 发布

一程序一世界

最新推荐文章于 2024-08-14 00:13:39 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： java node.js vue.js

本文链接：https://blog.youkuaiyun.com/Hello_word_2/article/details/110135725

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

博客主要包含Java代码相关内容，涉及后端开发领域。

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

1.使用vantui+fetch实现
主要遇到两个问题：
问题一：后台接收不到file 
问题二：后台返回json对象浏览器response返回空白
js代码

afterRead(file) {
    file.status = 'uploading';
    file.message = '上传中...';
    let url = baseUrl + '/app/toUploadPic';
    setTimeout(() => {
        const fd = new FormData()
        fd.append('file', file.file)   //vant传的file是个对象，不是二进制文件 要file.file
        fetch(url, {
            method: 'POST',
            body: fd
        }).then(res => res.json(res)).then(res => {// 必须要带res.json(res) 不然后台返回的            
                                                    //json接收不到
            if (res.code == 200) {
                file.url = res.url
                file.status = 'success';
                file.message = '上传成功';
            } else {
                file.status = 'failed';
                file.message = '上传失败';
            }
        })
    }, 1000);
},

java代码

 @RequestMapping("/toUploadPic")
    @ResponseBody
    public JSONObject toUploadPic(MultipartFile file){

    //业务逻辑

    }