elementUI上傳圖片至七牛服務器---更新

elementUI上傳圖片至七牛服務器

安裝七牛模塊：npm install qiniu

編輯功能上傳圖片並返回URL傳給后端前端在拿到顯示出來( 這里沒做其他限制只做了限制單張后上傳按鈕隱藏，簡單操作下 )

單張限制：

七牛服務器儲存：[ 管理控制平台 -> 對象儲存 -> 內容儲存 ]中查看

 

 

 

elementUI上傳圖片插件配置(  其他的UI框架中都有注釋，說幾個重要的 )

action：綁定的是七牛雲上傳儲存區域的上傳域名( 我們是客戶端上傳 )

[ 開發者中心 -> 儲存區域 ]中查看

 data：綁定的是前端生成的token[ http://jsfiddle.net/gh/get/extjs/4.2/icattlecoder/jsfiddle/tree/master/uptoken ]

 accessKey / secretKey [ 個人中心 -> 密鑰管理中的 AK和SK ]

 bucketName：就是你的空間名 [ 管理控制平台 -> 對象儲存中的名字( 就是第一眼看到的名字。。。 ) ]

 設置token時間以防過期

 

 src：綁定的是圖片路徑這個路徑是傳到服務器后返回的URL

 on-success：上傳成功后的回調 

<el-form-item :label="theNewCoach.coachPicture" >
      <el-upload
         list-type="picture-card"
         :on-remove="handleRemove"
         :on-change="handleChange"
         :limit="limitCount"
         :class="{ hide: hideUpload }"
         :before-upload="beforeAvatarUpload"
         :action="actionPath"
         :data="postData"
 :on-success="handleAvatarSuccess">
         <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-dialog>
 </el-form-item>

data中：
actionPath: "七牛服務器的上傳地址",
imageUrl: "",
postData: {
   token:"生成的token",
　　key:"",//自由key
}

事件：( 這里只是上傳成功的回調 )

上傳成功后進行路徑賦值：

圖片路徑( this.imageUrl ) = 服務器外鏈地址( https / http看自己那邊需求/ ) + key值

[ 管理控制平台 -> 對象儲存 -> 內容管理  ]中查看

[ 管理控制平台 -> 融合CDN -> 域名管理 ]也可以看到你的域名

//上傳成功
handleAvatarSuccess(res) {
　　this.imageUrl = " https:// 服務器外鏈地址 / " + res.key;
      console.log( this.imageUrl)
　　　　//這里調了一下編輯接口的方法，因為圖片上傳成功后要拿到返回的URL傳給后端 this.editCoachList();
}

//上傳之前

beforeAvatarUpload(file){

　　this.postData.key = file.name //通過這事key為文件名，上傳到七牛中會顯示對應的圖片名
}

對應查看頁顯示圖片

結構：
<el-form-item :label="theNewCoach.coachPicture" >
     <img :src="ruleForm.poster" alt="";"/>
</el-form-item>

data:
ruleForm:{ poster:"" }

接口數據中進行賦值:
this.ruleForm.poster = item.photograph