按照element ui官网的说法，http-request 覆盖原默认的上传行为，可以自定义上传的实现。
个人代码实现如下：
html 部分：
<div class="upload_img"> <el-upload class="avatar-uploader" ref="upload_img" action="" accept="image/jpeg,image/jpg,image/png" list-type="picture-card" :name="upload_name" :on-remove="handleRemove" :on-exceed="handleExceed" :limit="1" :file-list="file_list" :http-request="uploadSectionFile"> <i class="el-icon-plus"></i> <div slot="tip" class="el-upload__tip">只能上传jpeg、jpg、png 格式的图片，图片大小在2M以内。</div> </el-upload></div>
methods里面的方法
file_list:[ //展示已上传的图片数据 【修改时用的】 // { // name: '01', // url: 'http://voucher-backend.frgiftcube.com:80/upload/2019/07/31/1847366e138ac779a7c5bd229b65a2d4e130a1e5.jpg' // }],upload_name: 'files',//图片上传的后端接受图片文件的 keydialogImageUrl: '', //上传后的图片地址
methods里面的方法：
//文件超出个数限制时的钩子【判断上传的图片是否超过限制，超过提醒删除再进行上传】handleExceed: function () { this.$alert('图片最多上传一张，请删除再重新上传！', '', { showConfirmButton: false, callback: action => {} });},// 文件列表移除文件时的钩子handleRemove: function (file, fileList) { console.log(file, fileList); this.dialogImageUrl='';},uploadSectionFile: function (params) { // 自定义上传方法 // console.log(params); var that = this, file = params.file, //获取上传的文件 fileType = file.type, //获取文件类型 isImage = fileType.indexOf('image') != -1, // 判断是否是图片类型 file_url = that.$refs.upload_img.uploadFiles[0].url; // console.log(file,fileType,isImage,file_url,that.$refs.upload_img); var isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { // 判断大小 alert("上传图片的大小不能超过 2MB!"); that.$refs.upload_img.uploadFiles = []; //不符合就清空已选择的图片 return; } if(!isImage){ // 文件格式 alert("请选择图片文件！"); that.$refs.upload_img.uploadFiles = []; //不符合就清空已选择的图片 return; } if (isImage) { var img = new Image(); img.src = file_url; img.onload = function () { // 一切验证通过后调用上传方法 that.uploadFile(file); } }},uploadFile: function (file) { // 上传的函数 var that = this, formData = new FormData(); formData.append(that.upload_name, file); this.$axios.post("/file/upload", formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then(function (res) { // console.log(res); if(res.data.status == 0){ //成功的话将数据插入data中 that.dialogImageUrl = res.data.data.img; that.file_list[0]={name: '01', url: res.data.data.img}; // that.file_list[0]=res.data.data.img; }else{ // 上传失败，清除已选择 内容 ，并提示失败原因 that.$refs.upload_img.uploadFiles = []; that.file_list[0]=''; that.$alert('图片上传异常，原因：'+res.data.data, '', { showConfirmButton: false, callback: action => {} }); } })},
很多时候我们做了上传图片到后端：但是在修改时获取后端的图片时要显示在页面
只需将地址复制到 file_list 即可。 代码如下：
this.file_list=[ { name: '01', url: '后端返回的图片地址' }]
对应 html 写的 :file-list
