vue 用 file 的 change获取到上传文件的基本信息
- <input type="file" name="file" class="upload__input" @change="uploadChange" accept="image/png,image/gif">
- <div class="imgSrc">
- <span style="white-space:pre;"> </span><img :src="imgDataUrl" >
- </div>
然后拿到图片后用 beta64 转化预览图片
- uploadChange(event){
- if(event.target.files.length>0){
- this.files = event.target.files[0]; //提交的图片
- this.$conf.getBase64(event.target,(url)=>{
- this.imgDataUrl = 'data:image/png;base64,'+url; //显示的图片
- });
- }
- },
beta64方法
- getBase64 : function(file,callback){
- var maxWidth = 640;
- if(file.files && file.files[0]){
- var thisFile = file.files[0];
- if(thisFile.size>2019200){
- // mualert.alertBox("图片不能超过800K");
- alert("图片不能超过2M");
- return
- };
- var reader = new FileReader();
- reader.onload = function(event){
- var imgUrl = event.target.result;
- var img = new Image();
- img.onload = function(){
- var canvasId = 'canvasBase64Imgid',
- canvas = document.getElementById(canvasId);
- if(canvas!=null){document.body.removeChild(canvas);}
- var canvas = document.createElement("canvas");
- canvas.innerHTML = 'New Canvas';
- canvas.setAttribute("id", canvasId);
- canvas.style.display='none';
- document.body.appendChild(canvas);
- canvas.width = this.width;
- canvas.height = this.height;
- var imageWidth = this.width,
- imageHeight = this.height;
- if (this.width > maxWidth){
- imageWidth = maxWidth;
- imageHeight = this.height * maxWidth/this.width;
- canvas.width = imageWidth;
- canvas.height = imageHeight;
- }
- var context = canvas.getContext('2d');
- context.clearRect(0, 0, imageWidth, imageHeight);
- context.drawImage(this, 0, 0, imageWidth, imageHeight);
- var base64 = canvas.toDataURL('image/png',1);
- var imgbase = base64.substr(22);
- callback(imgbase)
- //this.imgUrl =
- }
- img.src = imgUrl;
- }
- reader.readAsDataURL(file.files[0]);
- }
- },
提交表单
- addSub(){
- let data = {};
- let files = this.files;
- let param = new FormData(); //创建form对象
- if(files!=''){
- param.append('file', files,files.name); //单个图片 ,多个用循环 append 添加
- }else{
- this.$message.error('请添加图片');
- }
- param.append('param', JSON.stringify(data));//添加form表单中其他数据
- let config = {
- headers:{'Content-Type':'multipart/form-data'}
- }; //添加请求头
- this.$ajax.post(this.ajaxUrl +'addStation',param,config)
- .then(response=>{
- var ret = response.data;
- if(ret.status){
- this.$message({
- message : '新增成功',
- type : 'success'
- })
- //清空数据
- this.imgDataUrl = '';
- this.files = [];
- }else{
- this.msg(ret.msg);
- }
- })
- },