阿里雲oss圖片添加水印

申請oss並添加bucket這里就不說了官網有文檔，網上也很詳細，這里記錄下oss添加圖片水印並記錄下幾個問題

1.在bucket中創建規則

登陸oss管理台左側

選擇圖片處理

 

點擊新建樣式，自己選定樣式並保存就會生成一個自定義的水印模板

 

 

然后前端中我是這樣寫的

getFilePath1() {
    let _this = this;
    //獲取文件信息
    const files = document.getElementById("file1")
    const fileLen = document.getElementById("file1").files
    const file = document.getElementById("file1").files[0]
    let name = fileLen[0].name
    let watermark='!test_watermark';
    let consat=this.calculate_object_name(name);
    _this.openFullScreen('上傳中...');
    for (let i = 0; i < fileLen.length; i++) {
      const file = fileLen[i]
      client().multipartUpload('image/' + consat+watermark, file).then(function (res) {
        var str = res.res.requestUrls[0]
        console.log('str is ' + str);
        _this.form.authUrl = 'https://自由域名/image' + consat+'%21test_watermark?x-oss-process=style/test_watermark';
　　 _this.closeFullScreen(); 
}).catch((err) => { 
console.log(err) 
})
 }
 },

其中file是你上傳的文件，這里獲取到他的名字並進行calculate_object加密處理 

上傳的樣式多種多樣，重要的是.multipartUpload方法，這里的意思是上傳到bucket下的image目錄中，並且使用test_watermark水印樣式

這里返回的url也是拼接的使用的是自有域名加文件名稱加上阿里雲約定的格式，其中我設定的水印格式分隔符為！

 

 轉utf-8后就是%21這樣上傳的文件就是有水印版本的了