axios 带验证参数上传

Posted 2021-02-21 Develon

示例代码

前端：

        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