Element-ui上傳圖片踩坑

使用Element-ui組件上傳圖片時，使用自帶的action發(fā)起上傳請求時碰到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" //上傳之前執(zhí)行:data="dataForm" //上傳時額外帶的參數(shù)，注意是額外name="avatar" //一看是不知道這個就是文件參數(shù)名稱:headers="headers"><el-button size="small" type="primary">點(diǎn)擊上傳</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) {//全部是多余操作，根本不用寫這個函數(shù)/*this.headers = {"Content-Type": 'multipart/form-data'} this.avatarParamBody = {avatar: file,};console.log(this.avatarParamBody);console.log(this.headers);*/}

1.上傳時，服務(wù)端沒有接受到對應(yīng)名稱的參數(shù)。

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。