2017-08-07

'SpringMVC从前端上传文件到腾讯云'

#本文介绍如何从前端上传文件到腾讯云,给网页添加一个简单的头像上传功能

#利用SpringMVC和腾讯云SDK达到头像图床的功能

#内附源码

首先捋一下思路:
1.首先添加依赖
2.首先需要有一个前端页面;
3.用户把数据提交到后台;
4.后台接收这个数据;
5.从数据中提取出头像;
6.利用腾讯云的SDK把头像上传;
7.获取头像外链将其放到数据库头像字段;
8.要想让头像登录后显示,需要在登录时把外链添加到Cookie中;
9.登录后从Cookie中获取外链并解密传到前端页面;

以下是详细内容:
1.首先添加依赖

<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.1</version>
</dependency>

2.首先需要有一个前端页面:

<form name="Form2" action="fileUpload2" method="post"  enctype="multipart/form-data">
    <h1>采用multipart提供的file.transfer方法上传文件</h1>
    <input type="file" name="file">
    <input type="submit" value="upload"/>
</form>

页面只有简单的上传功能,因为我不会写前端

3.用户把数据提交到后台:

4.后台接收到数据后先缓存在服务器上,然后利用腾讯云SDK上传到云服务器上:

@RequestMapping("fileUpload2")
    public String fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException {
        long startTime = System.currentTimeMillis();
        /**输出上传时的名字含后缀名*/
        System.out.println("fileName：" + file.getOriginalFilename());
        /**在临时存放在本地的地址*/
        String path = "E:/" + file.getOriginalFilename();
        File newFile = new File(path);
        /**直接把CommonsMultipartFile传入的文件写入到上面设置的路径里*/
        file.transferTo(newFile);
        try {
            /**密匙*/
            String secretKey = "12345678";
            /**从cookie中获取加密后的邮箱*/
            Cookie cokEmail = CookieUtil.getCookieByName(request, "secretEmail");
            if (cokEmail != null) {
                /**把email的数据取出*/
                String secretEmail = cokEmail.getValue();
                /**解密*/
                String email = DesUtil.decryption(secretEmail, secretKey);
                /**转发到腾讯云,并返回外链*/
                String pth = tencentYunService.upDate(path);
                Register register = new Register();
                register.setEmail(email);
                register.setPortraitpath(pth);
                /**根据邮箱更新头像字段*/
                categoryMapper.setPortrait(register);
                long endTime = System.currentTimeMillis();
                System.out.println("方法二的运行时间：" + String.valueOf(endTime - startTime) + "ms");
            }
        } catch (Exception e) {
            System.out.println("上传头像出错....");
        }
        return "none";
    }

categoryMapper接口

public interface CategoryMapper {
  
    void setPortrait(Register register);
}

tencentYunService 腾讯云上传接口

1
2
3

public interface TencentYunService {
    String upDate(String localFilePath);
}

tencentYunService 腾讯云实现类

@Service
public class TencentYunImpl implements TencentYunService {
    public COSClient Key() {
        // 设置用户属性, 包括appid, secretId和SecretKey
        // 这些属性可以通过cos控制台获取(https://console.qcloud.com/cos)
        long appId = 填自己的;
        String secretId = "填自己的";
        String secretKey = "填自己的";
        // 初始化客户端配置
        ClientConfig clientConfig = new ClientConfig();
        // 设置bucket所在的区域，比如广州(gz), 天津(tj)
        clientConfig.setRegion("gz");
        // 初始化秘钥信息
        Credentials cred = new Credentials(appId, secretId, secretKey);
        // 初始化cosClient
        COSClient cosClient = new COSClient(clientConfig, cred);
        return cosClient;
    }
    @Override
    public String upDate(String localFilePath) {
        try {
            String bucketName = "xiuzhenyuan";
            String time = String.valueOf(new Date().getTime());
            /**在服务器的位置*/
            String cosFilePath = "/" + time + ".jpg";
            UploadFileRequest uploadFileRequest =
                    new UploadFileRequest(bucketName, cosFilePath, localFilePath);
            uploadFileRequest.setEnableShaDigest(false);
            String uploadFileRet = Key().uploadFile(uploadFileRequest);
            System.out.println("upload file ret:" + uploadFileRet);
            /**外链生成需要根据自己的生成*/
            return "http://xiuzhenyuan-1253633260.cosgz.myqcloud.com/" + cosFilePath;
        } catch (Exception e) {
            System.out.println("上传头像出错");
            return null;
        }
    }
}