码迷,mamicode.com
首页 > 移动开发 > 详细

axios 带验证参数上传

时间:2020-04-30 17:26:05      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:end   live   app   catch   request   上传文件   dex   fun   rto   

示例代码

前端:

        uploadFiles(state, uploadFile) {
            state.uploadFiles.forEach(it => {
                const f = it.file;
                if (uploadFile.name == f.name && uploadFile.size == f.size) {
                    throw ‘此文件已存在‘;
                }
            });
            var fileWrapper = {
                file: uploadFile,
                uploading: true,
                progress: 0,
            };
            var index = state.uploadFiles.push(fileWrapper);
            var form = new FormData();
            form.append(‘auth‘,
                new Blob([localStorage.getItem(‘auth‘)],
                    { type: "application/json", },
                ),
            );
            form.append(‘file‘, uploadFile); // or fileWrapper.file
            api.post(‘resource/upload‘, form, {
                headers: {
                        // "Content-Type": undefined,
                },
                // 上传进度事件
                onUploadProgress: progressEvent => {
                    console.log({loaded: progressEvent.loaded, total: progressEvent.total});
                    let complete = (progressEvent.loaded / progressEvent.total * 100 | 0);
                    fileWrapper.progress = complete;
                },
            }).then(res => {
                console.dir(res.data);
            }).catch(err => {
                console.dir(err);
                fileWrapper.progress = -1;
            });
            console.log(‘上传文件‘);
            console.dir(uploadFile);
        },

后端:

    @PostMapping("upload")
    private fun liveRequest(@RequestPart file: MultipartFile, @RequestPart auth: Auth): Any {
        test(author!!.auth(auth))
        log.d("用户上传文件", file.originalFilename)
        file.transferTo(File("${ uploadDir }/file"))
        log.d("用户上传文件", file.originalFilename, "保存成功")
        return "OK"
    }

参考

https://stackoverflow.com/questions/21329426/spring-mvc-multipart-request-with-json

axios 带验证参数上传

标签:end   live   app   catch   request   上传文件   dex   fun   rto   

原文地址:https://www.cnblogs.com/develon/p/12809722.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!