其他分享
首页 > 其他分享> > uni图片上传前后端实现

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

 

标签:return,String,tempFile,fileName,file,uni,fileUser,上传,图片
来源: https://www.cnblogs.com/ckfuture/p/16572452.html