标签：uniapp console log filePath res upload 上传 图片

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
            }
        },
        onl oad() {
            _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;

    }

标签：uniapp,console,log,filePath,res,upload,上传,图片
来源： https://www.cnblogs.com/luminji/p/uniapp-zhong-de-tu-pian-shang-chuan.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。