vue 上传单张图片到阿里云

1.引入阿里云js

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

2.html部分

<div class="businessLicense"> <dl class="businessLicense3"> <dt>请上传营业执照照片</dt> <dd> <img :src="imgDataUrl" class="chatHead"> <input type="file" accept="image/*" name="file_head" class="uploadLogoImg" @change="uploadImgLogo($event)"/> </dd> </dl> <div class="businessLicense4"> <p @click="submitBtn">提交</p> </div> </div>

3..css部分

.businessLicense{ width: 7.5rem; padding-top: .9rem; } .businessLicense3{ width: 6.9rem; padding: .3rem; background: #fff; dt{ color: #333; font-size: .3rem; } dd{ width: 2.8rem; height: 3.96rem; background: #eaeaea; margin-top: .16rem; position: relative; -webkit-tap-highlight-color: rgba(0,0,0,0); img{ width: 2.8rem; height: 3.96rem; -webkit-tap-highlight-color: rgba(0,0,0,0); } .uploadLogoImg{ -webkit-tap-highlight-color: rgba(0,0,0,0); width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0; img{ width: 2.8rem; height: 3.96rem; } } } } .businessLicense4{ margin-top: 3rem; padding: .3rem; span{ display: block; color: #538fec; font-size: .26rem; margin-bottom: .3rem; } p{ width: 6.9rem; height: .9rem; background: #64abff; text-align: center; line-height: .9rem; color: #fff; font-size: .3rem; border-radius: 6px; } }

4.js部分

获取oss所需参数,调用后台接口

ossData(){ let url = this.changeData() + '/oss/policy' axios(url,{ method: 'post', url: url }).then(ret => { console.log(ret); this.host = ret.data.host; this.policy = ret.data.policy; this.signature = ret.data.signature; this.accessid = ret.data.accessid; this.dir = ret.data.dir; this.expire = ret.data.expire; this.callback = ret.data.callback; }).catch(err => { console.log(err) }); },

input发生onchange的时候

//当选择完成图片之后调用 uploadImgLogo(event){ let _this = this; //1. 拿到fileinput里面的文件, 这个file是一个file对象， file对象不能直接展示的 var file = event.target.files[0]; this.fileImg = file; // console.log(file); //2. 读取文件，成功img标签可以直接使用的格式 //FileReader类就是专门用来读文件的 var reader = new FileReader(); //3. 开始读文件 //readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串， 这个字符串可以直接作用img标签的图片资源使用 reader.readAsDataURL(file); //4. 因为文件读取是一个耗时操作， 所以它在回调函数中，才能够拿到读取的结果 reader.onload = function() { // console.log(reader.result); //直接使用读取的结果 _this.imgDataUrl = reader.result; _this.isUpImg = "1"; } // this.imgDataUrl = file; },

点击提交的时候上传图片到阿里云，成功以后传给后台

submitBtn(){ let _this = this; if(this.corporationName == '' || this.idCode == '' || _this.isUpImg == "0"){ Toast({ message: '请输入必填项内容', duration: 3000 }); }else{ var ossData = new FormData(); ossData.append('OSSAccessKeyId', _this.accessid); ossData.append('policy', _this.policy); ossData.append('Signature', _this.signature); //上传阿里云需要一个动态的random ossData.append('key', _this.dir + _this.random_string(32)); ossData.append('success_action_status', 200); // 指定返回的状态码 ossData.append("callback", _this.callback); ossData.append("file", _this.fileImg); this.$http.post(this.host, ossData, { headers: { "Content-Type": "multipart/form-data" } }) .then(ret => { console.log(ret); _this.imgUrl = ret.data.fileName; if(_this.imgUrl){ _this.upData(); } // console.log(_this.imgUrl); }).catch(err => { console.log(err) }); } }, upData(){ let _this = this let url = this.changeData() + '/member/auth/updateMemberInfo' axios(url,{ method: 'post', // data: obj params: { type: 2, // 实名认证 name: this.corporationName, // 姓名 【必传】 idCardNo: this.idCode, // 营业执照 【必传】 idCardPic: "/"+_this.imgUrl // 身份证照片 (逗号拼接) 【必传】 } }).then(data => { console.log(data); if(data.data.code == "101"){ Toast({ message: data.data.message, duration: 3000 }); this.$router.push({path: "/bindCard"}); } }).catch(err => { console.log(err) }); },

动态random

random_string(len){ len = len || 32; var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789'; var maxPos = chars.length; var pwd = ''; for (var i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; },