美文网首页
修改头像功能

修改头像功能

作者: 鹿白_tz | 来源:发表于2020-02-09 20:50 被阅读0次

<meta charset="utf-8">

1 准备工作

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

2. 后端接口开发

2.1 添加pom依赖
<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>2.8.3</version>
</dependency>

2.2 测试阿里云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();
    }
}

2.3 编写上传接口程序,用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();
    }
}

  • 测试结果

    image
2.4 编写修改个人头像的接口,并且用JUnit、swagger测试

此处省略mapper层、service层,及单元测试

  • UserController修改头像的接口
@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函数
showActionSheet: function() {
            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);
                }
            });
        }

  • 运行

相关文章

  • 头像修改功能

    准备 在阿里云申请AccessKey ID、Access Key Secret,妥善保管 申请阿里云OSS,新建B...

  • 修改头像功能

    1.开发前准备 在阿里云申请AccessKey ID、Access Key Secret,妥善保管 申请阿里云OS...

  • 修改头像功能

    1.开发前准备 在阿里云申请AccessKey ID、Access Key Secret,妥善保管 申请阿里云OS...

  • 修改头像功能

    1 准备工作 在阿里云申请AccessKey ID、Access Key Secret,保存 申请阿里云OSS,新...

  • android 模仿微信头像裁剪

    在android开发中经常会碰到修改头像的功能需求, 而在修改头像>中最难的部分就是在头像的裁剪功能。虽说网上一大...

  • 项目介绍和环境配置和数据库表的设计

    项目介绍 系统具有完整的用户登录注册功能以及找回密码功能,拥有完整的个人中心 个人中心:修改头像,修改密码,修改邮...

  • 简述iOS修改头像功能

    本文是为新手提供快速实现修改头像的功能,不为具体方法作赘诉一.添加库 二.添加代理 三.实现功能框 四.实现资源代...

  • 3. 修改头像功能

    1.开发前准备 在阿里云申请AccessKey ID、Access Key Secret,妥善保管 申请阿里云OS...

  • 2.修改头像功能

    1 准备工作 在阿里云申请AccessKey ID、Access Key Secret,保存 申请阿里云OSS,新...

  • ajax实现本地上传图片至数据库

    修改头像图片这个功能相信大家都玩过,选择图片->移动框选择图片范围->确认,头像就修改成功了。今天简单教大家实现这...

网友评论

      本文标题:修改头像功能

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