那些年踩過的eleUl上傳圖片的坑？

html : 

<el-upload
                    :headers="header"                        // 請求頭參數（通常包含token,認證參數authorization）
                    :data="uploadData"                        // 額外的其餘參數，自行配置如：{‘A’ :'B'}
                    accept="image/jpeg,image/jpg,image/png"   // 限制圖片格式
                    :action="uploadCoverUrl"        // 圖片上傳服務器地址 
                    list-type="picture-card"
                    name="file"
                    :file-list="fileList"          // 圖片被添加的集合數組
                    :class="{hideUpload: hide}"    // 超過如今次數或者張數，隱藏+，頁面不讓繼續添加圖片，默認false
                    :limit="1"                     // 限制次數
                    ：before-upload = 'beforeAvatarUpload'   //上傳前回調
                    :on-success="handleAvatarSuccess"        // 成功回調
                    :on-preview="handlePictureCardPreview"   // 預覽回調
                    :on-remove="handleRemove">               // 刪除回調
                    <i class="el-icon-plus"></i>           // 設計添加背景圖標
</el-upload>

<el-dialog :visible.sync="dialogVisible">         // 主要用做預覽大圖
    <img width="100%" :src="dialogImageUrl" >
</el-dialog>

<div class="tips">                      // 上傳以前限制格式提示 beforeAvatarUpload
    <p>1.建議尺寸(360*240)</p>
    <p>2.格式爲jpg或png</p>
    <p>3.且不能大於2M</p>
</div>

看一下官方的 name解釋：

1. 與後臺Swgg 的對應：（坑一）

 它的錯誤也看下： MissingServletRequestPartException: Required request part 'file' is not present

 

2. 咱們在來看下他的請求頭錯誤，參數少穿或者傳錯的狀況：（坑二）

它的錯誤也看下：Error in v-on handler: "TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': Value is not a valid ByteString."

found in    （請求參數不是有效的值）

 

3. url 錯誤的拼接：（坑三）

查看錯誤： 單獨baseUrl.js 沒有export 出去，或者單獨引入時沒有加{}

import { base } from '../../api/baseUrl.js'

 

4. 圖片沒有回顯？ （坑四）

 // 上傳成功的鉤子
        handleAvatarSuccess(res, file, fileList) {
          // res 成功返回值，file 傳的值包含res 和fileList
          console.log(res)
          let that = this;
         that.fileList.push({
              name: res.data.name,
              url: res.data.path      // 沒有回顯的緣由是沒有後臺沒有正確返回path完整的路徑。
          })
          if(fileList.length === 1){
              that.hide = true;       // 隱藏添加按鈕
          }
        },

5. 預覽功能沒有圖片？或者最上層有遮罩層？（坑五）

 // 預覽大圖
        handlePictureCardPreview(file,fileList) {
            console.log(file)
            console.log(fileList)
            this.dialogImageUrl = file.url;  （不是後臺返回的path路徑）
            this.dialogVisible = true;
        },

有遮罩層的問題暫未解決，若是有知道的，請告知一下，謝謝。

6. 刪除功能：（這個不會有什麼錯誤，把fileList 從新賦值一下就能夠了。）

// 刪除一張封面的方法
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.hide = false;
            this.fileList = fileList
        },

7. 限制圖片大小：（這個也應該不會有什麼問題）

beforeAvatarUpload(file) {
            console.log(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  isLt2M;
        },

css:

/*上傳圖片的*/
 .hideUpload .el-upload--picture-card {
    display: none;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

 

至此因此可能遇到的問題都總結下來了，不再用怕上傳圖片了。有些朋友會問;原生上傳圖片會不會很難，個人回答是不難，樣式沒有eleUi好看，並且沒有作預覽功能，但能夠解決那個遮罩層的問題，詳情請翻看我以前的博客。