Elementui实现照片上传到阿里云OSS服务器上

Elementui实现照片上传到阿里云OSS服务器上

一、准备工作

1. 首先在阿里云上注册账户并开通oss服务，开通完如下图
2. 点击图片左上角，Bucket管理处，创建Bucket，默认就可以。记住所创建的bucket的名字
3. 获取Access Key，点击图片上方红色框处，按序操作就可以，会看见如下图：
4. 要记住红色框柱的两个值，要用这个来应用oss服务
5. 阿里云官方文档

二、开始工作

1. springboot项目，springboot项目的搭建，我就不写了
2. 引入阿里云OSS依赖

		<dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.8.0</version>
        </dependency>

3. 开始编写代码
   • 首先我编写了一个阿里云类，来存放阿里云基础数据

public class ALiYun {
   /*Endpoint 是区域地址，地域节点*/
   public  String ENDPOINT = "http://oss-cn-beijing.aliyuncs.com";
   /*阿里云主账号AccessKeyid 拥有所有API的访问权限, 是访问阿里云的秘钥，*/
   public  String ACCESSKEYID = "LTAI4FfT6pPcw88P89JCxP6g";
   /*阿里云主账号AccessKeysecret 拥有所有API的访问权限 是访问阿里云的秘钥，*/
   public  String ACCESSKEYSECRET = "mUQRBGCqqmgQfyRSOWnwMJqxna557M";
   /*你创建的 bucket 名称*/
   public  String BUCKETNAME = "whqaly";
   /*先建立的一个文件夹名称，也可以说是相册名称*/
   public  String KEY = "images/";

   public String getENDPOINT(){
       return  ENDPOINT;
   }
   public String getACCESSKEYID(){
       return ACCESSKEYID;
   }
   public String getACCESSKEYSECRET(){
       return ACCESSKEYSECRET;
   }
   public  String getKEY(){
       return KEY;
   }
   public String getBUCKETNAME(){
       return BUCKETNAME;
   }
}

• 地域节点哪里找？
• ok，接下来，可以直接编写 controller 了，不需要service。

@RestController    /* 使返回的数据转为 json 格式的数据 */
@RequestMapping("/imgg")
public class ImgController {
    @RequestMapping("/uploadImg")
    public Map<String,String> uploadImg(MultipartFile file) {
        ALiYun aly = new ALiYun();
        Map<String,String> outmap = new HashMap<>();
        String flag = "false";
        if (file != null){
            String imgname = file.getOriginalFilename();    /*此时获得的是该照片上传时的名字，如：1234.jpg或 345.png或。。。*/
            System.out.println(imgname);
            try{
                /*获取上传目前时间*/
                SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); //设置日期格式
                String dote = df.format(new Date());    // 目前时间

                // 生成新的文件名 （取图片名称+当前上传时间）
                String newFileName = imgname +"-"+ dote;
                System.out.println(newFileName);

                InputStream input = file.getInputStream();
                /*InputStream input = new URL("https://www.aliyun.com/").openStream();*/

                // 初始化阿里云oss链接，上传图片到服务器
                OSS ossClient = new OSSClientBuilder().build(aly.getENDPOINT(), aly.getACCESSKEYID(), aly.getACCESSKEYSECRET() );
                // 上传文件流
                ossClient.putObject(aly.getBUCKETNAME(),aly.getKEY() + newFileName,input);

                // 关闭OSSClient。
                ossClient.shutdown();

                flag = "true";
            }catch (IOException e){
                System.out.println("OMG,我捕捉到你了!");
            }finally {
                outmap.put("resultFlag",flag);
            }

        }
        return outmap;
    }
}

• MultipartFile 类，我使用这个类来接收前端传来的照片

4. 前端使用elementui，很方便，注意: action 的值是后端服务器的路径

		<el-upload
             class="upload-demo"
             action="http://127.0.0.1:8080/newweb/imgg/uploadImg"
             :on-preview="handlePreview"
             :on-remove="handleRemove"
             :file-list="fileList"
             list-type="picture"

             accept=".jpg,.png"
             >
       <i class="el-icon-upload" style="padding-top: 20px"><br><span style="font-size: 20px">上传图片</span></i>
      <!-- <el-button size="small" type="primary">点击上传</el-button>-->
       <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
     </el-upload>

5. 到此大工告成！