uniapp中的图片上传

UNIAPP中的图片上传

vue端，

<template>
    <view>
        <progress :percent="percent" strock-width="10"></progress>
        <button type="primary" @tap="cI">chooseImg</button>
    </view>
</template>

<script>
    // 注册一个进度条
    var _self;

    export default {
        data() {
            return {
                percent:0
            }
        },
        onLoad() {
            _self = this;
        },
        methods: {
            cI:function(){
                uni.chooseImage({
                    count: 1,
                    sizeType:['copressed'],
                    success(res) {
                        //因为有一张图片， 输出下标[0]， 直接输出地址
                        var imgFiles = res.tempFilePaths[0]
                        console.log(imgFiles)
                        // 上传图片
                        // 做成一个上传对象
                        var uper = uni.uploadFile({
                            // 需要上传的地址
                            url:'http://localhost:8089/zuikccms/upload.do',
                            // filePath  需要上传的文件
                            filePath: imgFiles,
                            name: 'files',
                            success(res1) {
                                // 显示上传信息
                                console.log(res1)
                            }
                        });
                        // onProgressUpdate 上传对象更新的方法
                        uper.onProgressUpdate(function(res){
                            // 进度条等于 上传到的进度
                            _self.percent = res.progress
                            console.log('上传进度' + res.progress)
                            console.log('已经上传的数据长度' + res.totalBytesSent)
                            console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
                        })
                    }
                })
            }
        }
    }
</script>

<style>

</style>

java端，

    @RequestMapping("upload")
    @ResponseBody
    public Map<String, Object> upload(@RequestAttribute SysSite site, MultipartFile[] files, 
                         Boolean override, HttpServletRequest request,  HttpServletResponse response, ModelMap model) {

        Map<String, Object> result = new HashMap<>();
        ArrayList< Map<String, Object>> uplist = new ArrayList<>();

        if (null != files) {
            try {
                for (MultipartFile file : files) {
                    String originalName = file.getOriginalFilename();
                    String filePath = "upload" + CommonConstants.SEPARATOR
                            + Calendar.getInstance().get(Calendar.YEAR) + CommonConstants.SEPARATOR
                            + (Calendar.getInstance().get(Calendar.MONTH) + 1) + CommonConstants.SEPARATOR + originalName;
                    String fuleFilePath = siteComponent.getWebFilePath(site, filePath);
                    if (null != override && override || !CmsFileUtils.exists(fuleFilePath)) {
                        CmsFileUtils.upload(file, fuleFilePath);
                    }
                    
                    Map<String, Object> upfile = new HashMap<>();
                    
                    upfile.put("originalName", originalName);
                    upfile.put("filePath", filePath);
                    uplist.add(upfile);
                }
                
                result.put("fileList" , uplist);
                return result;
            } catch (IOException e) {
                model.addAttribute(CommonConstants.ERROR, e.getMessage());
                log.error(e.getMessage(), e);
                return result;
            }
        }
        return result;

    }