vue使用elementui上传


< el-upload
class= "avatar-uploader"
action= ""
name = 'pic'
:show-file-list=" false"
:before-upload=" beforeAvatarUpload5" >
< img v-if=" imgUrl5" :src=" imgUrl5" class= "avatar" >
< i v-else class= "el-icon-plus avatar-uploader-icon" ></ i >
</ el-upload >

beforeAvatarUpload5( file) { //
const isPNG = file. type === 'image/png';
const isJPG = file. type === 'image/jpg';
const isJPEG = file. type === 'image/jpeg';
const isLt1M = file. size / 1024 / 1024 < 1;
if (! isPNG && ! isJPG && ! isJPEG) {//限制格式
this. $message. error( '上传头像图片只能是PNG和JPG格式!');
}
if (! isLt1M) {//限制大小
this. $message. error( '上传头像图片大小不能超过 1MB!');
}
if(( isPNG || isJPG || isJPEG) && isLt1M){
let fd = new FormData()
fd. append( 'pic', file);
var _that = this;
this. $http. post( Util. url+ "/upload/upload", fd). then( function( res){
_that. imgUrl5 = res. data. content. serviceaPath;//服务器的
_that. img5 = res. data. content. dataPath;//上传名字
})
}
return isLt1M && isJPG && isPNG && isJPEG;
}


上面的是上传图片

下面的是上传文件  

定义一个数组  recordList

< el-upload
class= "upload-demo"
action= ""
:before-upload=" handleChange1"
:file-list=" recordList" >
< el-button class= "line_btn w_h" >
< div >
< span class= "apply_img1" ></ span >
< span >上传 </ span >
< span class= "apply_crile" ></ span >
</ div >
</ el-button >
</ el-upload >

使用ajax请求,设置async:false

handleChange1 : function( file, fileList) {
// this.isunload = true;
// this.progressData()
var _that = this;
var fd = new FormData();
fd. append( "pic", file);
this. recordList = [{ name: file. name, url: ''}];
$. ajax({
type: "POST",
contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
processData: false, //必须false才会自动加上正确的Content-Type
url: Util. url+ "/upload/upload",
data: fd,
async: false,
success : function ( res) {
_that. recordfilePath = res. content. serviceaPath;
_that. recordfile = res. content. dataPath;
}
});
return false;
}
如果涉及到图片回显,有问题的话,比如,下一步,上一步,再下一步,上一步,数据消失的话,看一下后台的数据问题


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页