[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的实例化对象中了，然后传给后台接口即可 ~~~