Vue图片上传

document.getElementById('sourceFile').value = ''  " //可以重复上传文件 (@change 函数里面写)

https://www.jianshu.com/p/ce86178221a6

eleme：

https://www.cnblogs.com/wangqi2019/p/10906605.html

https://segmentfault.com/a/1190000017496755 

 

// 正则替换哈 imgData 为base64字符串
imgData.replace(/^data:image\/\w+;base64,/, "");

   

      
  
   
 
         
 

uploadFile (e) {  // 上传照片
    if(this.imgs.length>2){
        Toast('最多上传三张图片');
        return false
    }
    var self = this
    let file = e.target.files[0]
    //这"file" 代表参数名 然后把后端需要参数全部用这个形式push进去
    let param = new FormData() // 创建form对象
    param.append('myfile',file) // 通过append向form对象添加数据
    param.append('filename','myfile') // 通过append向form对象添加数据
    param.append('token', '2') // 添加form表单中其他数据
    console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
    let config = {
        headers: {'Content-Type': 'multipart/form-data'}    
    }
    // 添加请求头
    this.axios.post('http://lycard.jushiwl.com/h5/my_api/upload', param, config)
        .then((res) => {
        if (res.data.code === 200) {
            let datas = res.data.data;
            let imgurl = datas.url;
            this.imgs.push(imgurl)
        }
        })
         .catch(()=>{
            return Promise.reject("失败")
        })
    }


css:
.wrappic{
    background: url('~@/assets/images/picadd.png') center center no-repeat;
    background-size: cover;
    width: 1.6rem;
    height: 1.6rem;
    display: block;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}
.finish_room2 input{
    font-size: .3rem;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.finish_room2{
    display: flex;
    flex-direction: row;
    align-items: center;    
    padding: .3rem 0;
    flex-wrap: wrap;
}
.room_img{
    margin-right: .4rem;
    margin-bottom: .4rem;
}
.room_img img{
    width: 2rem;
    height: 2rem;
}