七牛云圖片上傳

七牛云圖片上傳

進入七牛云官網，注冊、登錄找到物件存盤

新建存盤空間

進入個人中心，找到秘鑰管理獲取AK和SK

代碼：

pox.xml匯入依賴

<!--七牛云依賴-->
<dependency>
    <groupId>com.qiniu</groupId>
    <artifactId>qiniu-java-sdk</artifactId>
    <version>[7.7.0, 7.7.99]</version>
</dependency>

application.yml配置中設定上傳檔案的大小

servlet:
  multipart:
    max-file-size: 10MB
    max-request-size: 100MB # 上傳檔案的大小把控 可自定義大小

service層

String upload(InputStream inputStream , String fileName);

serviceimpl層

@Override
public String upload(InputStream inputStream, String fileName) {
    //構造一個帶指定 Region 物件的配置類
    //Region.region2();代表華南地區
    Configuration cfg = new Configuration(Region.region2());
    //...其他引數參考類注釋
    UploadManager uploadManager = new UploadManager(cfg);
    //...生成上傳憑證，然后準備上傳
    //AK和SK從七牛云個人中心秘鑰管理查看
    String accessKey = "your access key";
	String secretKey = "your secret key";
    //bucket就是創建
	String bucket = "your bucket name";
    //默認不指定key的情況下，以檔案內容的hash值作為檔案名
    String key = fileName;
    String result = null;
    try {
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket);
        try {
            Response response = uploadManager.put(inputStream, key, upToken,null,null);
            System.out.println(response);
            //決議上傳成功的結果
            if(response.statusCode==200){
                //回傳圖片上傳的路徑地址
                result = "http://www.sunpeizhi.top/"+fileName;
            }
        } catch (QiniuException ex) {
            Response r = ex.response;
            System.err.println(r.toString());
            try {
                System.err.println(r.bodyString());
            } catch (QiniuException ex2) {
                //ignore
            }
        }
    } catch (Exception ex) {
        //ignore
    }
    return result;
}

controller層

@RequestMapping("/upload")
//file跟前端的name值一樣
    public Object fileupload(MultipartFile file) throws IOException {
        System.out.println("---------files/upload---------");
        String filename = file.getOriginalFilename();
        String date = DateTimeFormatter.ofPattern("yyyy/MM/dd").format(LocalDateTime.now());
        filename =  date+System.currentTimeMillis()+filename.substring(filename.lastIndexOf("."));
        String name = service.upload(file.getInputStream(), filename);
        System.out.println("name="+name);
        return Result.success(name,"上傳成功");
    }

前端vue

<el-form-item prop="images" label="頭像照片" size="mini">
  <div id="wrapper" v-cloak>
    <el-upload
      v-model="registerForm.images"
      class="avatar-uploader"
      <!--提交后臺地址-->
      action=""
      <!--自動提交autoUpload:true-->
      :auto-upload="autoUpload"
      name="file"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="registerForm.images" :src="registerForm.images" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</el-form-item>

//上傳圖片之前執行
beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    this.$message.error('上傳套餐圖片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    this.$message.error('上傳套餐圖片大小不能超過 2MB!');
  }
  return isJPG && isLt2M;
},


//檔案上傳成功后的鉤子，response為服務端回傳的值，file為當前上傳的檔案封裝成的js物件
handleAvatarSuccess(response, file) {
  console.log(response);
  //為模型資料imageUrl賦值，用于頁面圖片預覽
  this.imageUrl = response.data;
  this.$message({
    type: response.code == 0 ? 'success' : 'error',
    message: response.msg
  });
  //設定模型資料（圖片名稱），后續提交ajax請求時會提交到后臺最終保存到資料庫
  this.registerForm.images = response.data;
  this.form.images = response.data;
},