[TOC] >[success] # Element ui上傳圖片功能 代碼如下： ~~~ 屬性說明： action // 必選參數，上傳的地址，官方說必填其實不用必須填寫也可以，但是必須填一個空的字符串，因為這個地方后臺提 // 供的不是這種接口，所以我這里寫了空字符串 accept // 接受上傳的文件類型，我這里只允許上傳.jpg, .jpeg, .png格式的圖片 before-upload // 這個屬性官方是是上傳文件之前的鉤子，可以用來判斷圖片大小 http-request // 自定義上傳文件 file-list // 儲存預覽圖片的列表（數組形式） show-file-list // 是否顯示已上傳文件列表 headers: { // 這里需要把請求頭修改為form-data的格式，后臺也需要修改 'Content-Type': 'multipart/form-data' } <el-upload class="avatar-uploader" action="" accept=".jpg, .jpeg, .png" :before-upload="beforeAvatarUpload" :http-request='submitUpload' :file-list="fileList" :show-file-list = "false"> <i class="el-icon-plus avatar-uploader-icon"></i> </el-upload> data(){ return{ fileList: [], // element ui的展示上傳文件列表 } }， methods:{ // 上傳文件 async submitUpload(content) { try { const formData = new FormData() formData.append('media', content.file) const res = await uploadMedia(formData) // 把接口返回的對象形式的數據轉換成element ui的對象格式 this.fileList = elementFilelist(this.fileList, res); // 這里的url是自己獲取后臺地址拼接起來的圖片地址 this.imageUrl = this.fileList[0].url; this.form.diseaseImage = this.form.diseaseImage || {} this.form.diseaseImage.id = res.id; this.delIconShow = true; } catch (e) { this.$message.warning("報錯了") } }, // 判斷文件類型 beforeAvatarUpload(file) { const isFile = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel' if (!isFile) { this.$message.error('導入文件格式不正確') return false // 一定要return false因為retrun是true的話是證明驗證通過了 } return isFile } } 上面就是把上傳文件的file對象appen到formData的實例化對象中了，然后傳給后臺接口即可 ~~~