vue使用elementui上传

2019-04-15 15:33发布

站内文章 / PIC单片机
13520 0 904

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

热门文章