uni图片上传前后端实现

1.前端

<view class="u-m-r-10"><u-avatar :src="pic" size="140" @click="img"></u-avatar></view>
复制代码
/* 图片上传 */
        img:function(){
            uni.chooseImage({
                 count: 9,
                sizeType:"compressed",
                success: (res) => {
                    console.log('chooseImage<<',res);
                    //图片集合
                    var filePaths = res.tempFilePaths;
                    for(var i =0; i<filePaths.length;i++){
                        const imgsFile = res.tempFilePaths[i];
                        const uploadTask = uni.uploadFile({
                                        url: getApp().globalData.$websiteUrl+'/system/user/savePicByFormData',
                                        filePath: imgsFile,
                                        name: 'file',
                                        formData: {
                                            'fileUser': this.Name+i
                                        },
                                        header:{"Content-Type": "multipart/form-data"},
                                        success:(uploadFileRes)=>{
                                            
                                            if(uploadFileRes.statusCode === 200){
                                                console.log('上传文件名称<<',uploadFileRes);
                                            }
                                        }
                                    });
                    }
                    
                    
                }
            })
        }
复制代码

说明:formData:用于向后台传输其他二外参数。

2.后台

controller层

复制代码
   /**
     * @param fileUser 请求其他参数
     * @param file     文件流
     * @return
     * @throws IOException
     */
    @RequestMapping(value ="/savePicByFormData",method = RequestMethod.POST)
    @ResponseBody
    public String savePicByFormData(@RequestParam("file") MultipartFile file, String fileUser) throws IOException {
        try {
            //文件保存名字
            String fileName = service.savePicByFormData(file,fileUser);
            return fileName;
        } catch (Exception exception) {
            return ResponseMsg.INSERT_UPDATE_ERROR;
        }
    }
复制代码

service实现类

复制代码
/**
     * 保存图片方式二
     *
     * @param file
     * @return
     * @throws IOException
     */
    @Override
    public String savePicByFormData(MultipartFile file,String fileUser) {
        try {
            // 图片存储路径
            String path = "C:\\image\\factory";

            // 判断是否有路径
            if (!new File(path).exists()) {
                new File(path).mkdirs();
            }
            //String fileName = UUID.randomUUID().toString().replace("-", "") + ".jpg";
            String fileName = fileUser + ".png";
            File tempFile = new File(path, fileName);
            if (!tempFile.exists()) {
                tempFile.createNewFile();
            }
            file.transferTo(tempFile);
            return fileName;
        } catch (Exception exception) {
            System.out.println(exception.getMessage());
            return exception.getMessage();
        }

    }
复制代码

参考文章:

https://javaforall.cn/147987.html

http://t.zoukankan.com/flypig666-p-12488556.html

 

posted @   创客未来  阅读(536)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示