基於vue+element的上傳組件實現圖片上傳

基於Vue、Element-ui，封裝組件為例子聊聊如何實現這個功能。其它組件實現方式思路一樣的！

1. 雲儲存方式

常見的有七牛雲，OSS（阿里雲）等，這些雲平台提供API接口，調用相應的接口，文件上傳后會返回圖片存儲在服務器上的路徑，前端獲得這個路徑保存下來提交給后端即可。流程很簡單。

 

主要步驟：

1. 向后端發送請求，獲取oss配置數據
2. 文件上傳后，調用oss提供接口。
3. 文件上傳完成，文件儲存在服務器相關路徑
4. 以接口的形式將返回的路徑字段返回給前端，存到表單對象中。

 

代碼

 視圖層代碼

<el-upload
     class="avatar-uploader"
     action="noAction"
     :headers="{ 'Content-Type': 'application/x-www-form-urlencoded' }"
     :show-file-list="false"
     :on-success="handleAvatarSuccess"
     :http-request="fileRequestBackId"
     :before-upload="beforeAvatarUpload">
         <img v-if="query.authenticationInfo.backId" 
         :src="query.authenticationInfo.backId" class="avatar">
          <div v-else class="avatar-uploader">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span class="addText">上傳身份證</span>
          </div>
</el-upload>

　　elementUI的上傳組件，http-request方法: 覆蓋默認的上傳行為，可以自定義上傳的實現。

　　formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData對象可以將form表單元素的name與value進行組合,實現表單數據的序列化,從而介紹表單元素的拼接,提高工作效 率。

 

 const params = new FormData() //創建FormData params.append('file', item.file) uploadFileToSecretOss(params).then(res => { if (res.data.code === '0') {
 // 拿到返回的上傳路徑，res.data.uploadUrl, 去提交表單
　　　　　　　// doSomethings
　　 } else {}
　　　　}) 
　　　},