頭像修改

  • 寫代碼之前的準備工作：
    1.在阿里云oss登錄并實名認證
    開通對象存儲控制臺oss，新建一個bucket（多個單詞中劃線分割），開通AccessKey（可以改地址），記錄id號，后面會用到


    oss.png

后端：
pom.xml

<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的訪問權(quán)限，風(fēng)險很高
        String accessKeyId = "****";
        String accessKeySecret = "****";
        String bucketName = "****";
        String filedir = "avatar/";
        String fileKey = "hello.jpg";
        // 創(chuàng)建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();
    }
}

Mapper類

@Update("UPDATE t_user SET nickname=#{nickname} WHERE id =#{id}")
 void nickname(User user);

Service類

void nickname(User user);

編寫實現(xiàn)類：

 @Override
    public void nickname(User user) {
        userMapper.nickname(user);
    }
    }

測試類：

@Test
    public void nickname() {
        User user=userService.getUserById(1);
        user.setNickname("明天");
        userService.updateUser(user);
    }

編寫測試程序：UploadController

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 {
            //創(chuàng)建臨時文件，用uuid主文件名+原后綴名
            tempFile = File.createTempFile(prefix, prefix);
            // MultipartFile轉(zhuǎn)成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();
    }
}

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 {
        //創(chuàng)建臨時文件
        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();
    //根據(jù)userId查詢出原始用戶數(shù)據(jù)
    User user = userService.getUserById(userId);
    //更新頭像屬性
    user.setAvatar(url.toString());
    //修改用戶信息并持久化
    userService.updateUser(user);
    //將頭像鏈接返回給客戶端，以便實時預(yù)覽
    return url.toString();
}

在swagger里面測試如果是200就成功了

前端：
1.setting頁面點擊用戶資料跳轉(zhuǎn)到user_info頁面，別忘了在pages.json注冊新頁面

<navigator url="../user_info/user_info">
    個人資料
</navigator>

2.user_info頁面

    <view class="container">
        <view class="list">
            <view class="list-item">
                <view class="left">昵稱</view>
                <view class="right">
                    <navigator url="../user_name/user_name" class="list-item">
                        {{ nickname }}
                    </navigator>
                </view>

                <!-- <navigator url="../user_name/user_name">昵稱：{{nickname}}</navigator> -->
                <!-- <input v-model="nickname" class="nickname"/> -->
            </view>
            <view class="list-item">
                <text>頭像：</text>
                <image :src="avatar" class="avatar" @tap="showActionSheet"></image>
            </view>
            <view class="list-item"><text>修改密碼</text></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            nickname: uni.getStorageSync('login_key').nickname,
            avatar: uni.getStorageSync('login_key').avatar,
            userId: uni.getStorageSync('login_key').userId
        };
    },
    onLoad() {},
    onShow() {
        var _this = this;
        uni.request({
            // url: 'http://192.168.43.83:8080/api/user/' + uni.getStorageSync('login_key').userId,
            url: this.apiServer + '/user/' + uni.getStorageSync('login_key').userId,
            method: 'GET',
            header: { 'content-type': 'application/json' },
            success: res => {
                if (res.data.code === 0) {
                    console.log(res.data.data.avatar + '————————————');
                    _this.avatar = res.data.data.avatar;
                    _this.nickname = res.data.data.nickname;
                }
            }
        });
    },
    methods: {
        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://192.168.43.83:8080/api/user/avatar',
                                            // url: this.apiServer + '/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://192.168.43.83:8080/api/user/avatar',
                                    /* url:this.apiServer + '/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);
                }
            });
        }
    }
};
</script>

<style scoped>
.list-item {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: space-between;
}
/* .nickname{
        float: right;
    } */
</style>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容