美文网首页
修改头像功能

修改头像功能

作者: 蜜思1013 | 来源:发表于2019-04-18 08:02 被阅读0次

    1.开发前准备

    • 在阿里云申请AccessKey ID、Access Key Secret,妥善保管
    • 申请阿里云OSS,新建Bucket,目录,自己上传两张图片先试试

    2. 后端接口开发

    • 添加pom依赖
    <dependency>
        <groupId>com.aliyun.oss</groupId>
        <artifactId>aliyun-sdk-oss</artifactId>
        <version>2.8.3</version>
    </dependency>
    
    • 第一个测试程序,测试阿里云OSS上传功能
    public class AliOSSTest {
        public static void main(String[] args) {
            // Endpoint以杭州为例,其它Region请按实际情况填写。
            String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
            // 阿里云主账号AccessKey拥有所有API的访问权限,风险很高
            String accessKeyId = "****";
            String accessKeySecret = "****";
            String bucketName = "****";
            String filedir = "avatar/";
            String fileKey = "hello.jpg";
            // 创建OSSClient实例
            OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
            // 上传文件
            PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileKey, new File("D:\\bg.jpg"));
            //时间戳
            Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10);
            // 生成URL
            URL url = ossClient.generatePresignedUrl(bucketName, filedir + fileKey, expiration);
            System.out.println(url);
            ossClient.shutdown();
        }
    }
    
    • 编写上传接口程序,然后用swagger测试
    package com.soft1721.jianyue.api.controller;
    
    import com.aliyun.oss.OSSClient;
    import com.aliyun.oss.model.PutObjectResult;
    import com.soft1721.jianyue.api.util.ResponseResult;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.File;
    import java.io.IOException;
    import java.net.URL;
    import java.util.Date;
    import java.util.UUID;
    
    @RestController
    @RequestMapping(value = "/api")
    public class UploadController {
        @PostMapping("/avatar/upload")
        public String ossUpload(@RequestParam("file") MultipartFile sourceFile) {
            String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
            String accessKeyId = "***";
            String accessKeySecret = "***";
            String bucketName = "***";
            String filedir = "avatar/";
            // 获取源文件名
            String fileName = sourceFile.getOriginalFilename();
            // 获取源文件名后缀
            String suffix = fileName.substring(fileName.lastIndexOf("."));
            //uuid生成主文件名
            String prefix = UUID.randomUUID().toString();
            //新文件名
            String newFileName = prefix + suffix;
            //File类型的临时文件
            File tempFile = null;
            try {
                //创建临时文件,用uuid主文件名+原后缀名
                tempFile = File.createTempFile(prefix, prefix);
                // MultipartFile转成File
                sourceFile.transferTo(tempFile);
            } catch (IOException e) {
                e.printStackTrace();
            }
            OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
            ossClient.putObject(bucketName, filedir + newFileName, tempFile);
            Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10);
            // 生成URL
            URL url = ossClient.generatePresignedUrl(bucketName, filedir + newFileName, expiration);
            ossClient.shutdown();
            //URL返回给客户端
            return url.toString();
        }
    }
    
    • UploadController
    @PostMapping("/avatar")
    public String ossUpload(@RequestParam("file") MultipartFile sourceFile,@RequestParam("userId") int userId) {
        String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
        String accessKeyId = "***";
        String accessKeySecret = "***";
        String bucketName = "***";
        String filedir = "avatar/";
        // 获取文件名
        String fileName = sourceFile.getOriginalFilename();
        // 获取文件后缀
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        //uuid生成主文件名
        String prefix = UUID.randomUUID().toString();
        String newFileName = prefix + suffix;
        File tempFile = null;
        try {
            //创建临时文件
            tempFile = File.createTempFile(prefix, prefix);
            // MultipartFile to File
            sourceFile.transferTo(tempFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
        OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
        ossClient.putObject(bucketName, filedir + newFileName, tempFile);
        Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10);
        // 生成URL
        URL url = ossClient.generatePresignedUrl(bucketName, filedir + newFileName, expiration);
        ossClient.shutdown();
        //根据userId查询出原始用户数据
        User user = userService.getUserById(userId);
        //更新头像属性
        user.setAvatar(url.toString());
        //修改用户信息并持久化
        userService.updateUser(user);
        //将头像链接返回给客户端,以便实时预览
        return url.toString();
    }
    

    3.前端

    • setting页面点击用户资料跳转到user_info页面,别忘了在pages.json注册新页面
    <navigator url="../user_info/user_info">
    个人资料
    </navigator>
    
    • user_info页面对头像做点击事件,点击弹出ActionSheet
    <image :src="avatar" class="avatar" @tap="showActionSheet"></image>
    
    • js部分的data数据
    data() {
    return {
    nickname: uni.getStorageSync('login_key').nickname,
    avatar: uni.getStorageSync('login_key').avatar,
    userId: uni.getStorageSync('login_key').userId
    };
    }
    
    • showActionSheet函数
       var _this = this;
                uni.showActionSheet({
                    itemList: ['拍照', '从相册选择'],
                    success: function(res) {
                        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
                        //选择的是拍照功能
                        if (res.tapIndex == 0) {
                            uni.chooseImage({
                                count: 1,
                                sourceType: ['camera'],
                                success: function(res) {
                                    uni.saveImageToPhotosAlbum({
                                        filePath: res.tempFilePaths[0],
                                        success: function() {
                                            console.log('save success');
                                            uni.uploadFile({
                                                url: 'http://****:8080/api/user/avatar', 
                                                filePath: res.tempFilePaths[0],
                                                name: 'file',
                                                formData: {
                                                    userId: _this.userId
                                                },
                                                success: uploadFileRes => {
                                                    console.log(uploadFileRes.data);
                                                    _this.avatar = uploadFileRes.data;
                                                }
                                            });
                                        }
                                    });
                                }
                            });
                        }
                        //从相册选择
                        if (res.tapIndex == 1) {
                            uni.chooseImage({
                                count: 1, //默认9
                                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都
                                sourceType: ['album'], //从相册选择
                                success: function(res) {
                                    console.log(JSON.stringify(res.tempFilePaths));
                                    uni.uploadFile({
                                        url: 'http://******:8080/api/user/avatar', 
                                        filePath: res.tempFilePaths[0],
                                        name: 'file',
                                        formData: {
                                            userId: _this.userId
                                        },
                                        success: uploadFileRes => {
                                            console.log(uploadFileRes.data);
                                            _this.avatar = uploadFileRes.data;
                                        }
                                    });
                                }
                            });
                        }
                    },
                    fail: function(res) {
                        console.log(res.errMsg);
                    }
                });
            }
    

    相关文章

      网友评论

          本文标题:修改头像功能

          本文链接:https://www.haomeiwen.com/subject/zujowqtx.html