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;
}
如果涉及到图片回显,有问题的话,比如,下一步,上一步,再下一步,上一步,数据消失的话,看一下后台的数据问题


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页