Element-ui上傳圖片踩坑

使用Element-ui組件上傳圖片時，使用自帶的action發起上傳請求時碰到400錯誤

錯誤代碼

<el-uploadclass="upload-demo"action="http://localhost:8080/create/uploadAvatar":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove":limit="1":on-exceed="handleExceed":file-list="fileList"list-type="picture":before-upload="beforeUpload" //上傳之前執行:data="dataForm" //上傳時額外帶的參數，注意是額外name="avatar" //一看是不知道這個就是文件參數名稱:headers="headers"><el-button size="small" type="primary">點擊上傳</el-button></el-upload> methods: {handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {this.$message.warning(`,,,,,`);console.log(file);},handleExceed(files, fileList) {this.$message.warning(`最多選擇一張圖片`);},beforeRemove(file, fileList) {return this.$confirm(`確定移除 ${ file.name }？`);},beforeUpload(file) {//全部是多余操作，根本不用寫這個函數/*this.headers = {"Content-Type": 'multipart/form-data'} this.avatarParamBody = {avatar: file,};console.log(this.avatarParamBody);console.log(this.headers);*/}

1.上傳時，服務端沒有接受到對應名稱的參數。

弄了很久都沒有解決，我就想著怎么就接受不到avatar作為文件參數名。

后來查了很多帖子才知道，有一個name屬性對應的就是參數名，直接在組件里面寫個name=“avatar”就可以，完全不用自己加參數。

2.第一次上傳成功，第二次報錯

原來這個發起上傳請求會自動給加上清求頭"Content-Type": 'multipart/form-data'

我在beforeUpload中加入了請求頭，第一次沒問題，但第二次就寫了連個Content-Type參數，導致后端報錯。

這么一來before-upload的函數就是多余的！！！除非有需要

總結

以上是生活随笔為你收集整理的Vue Element-ui上传图片踩坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。