一, 逻辑
点击 li 触发事件 chooseImage 即触发 input 标签事件 photoChange
input 标签事件 photoChange
file 返回的是如下变量
模拟上传表单方法
执行上传
二, 代码
- <li class="scroll-item first-item" @click="chooseImage">
- <i class="iconPhoto"></i>
- <span class="title"> 拍照 </span>
- <input @change="photoChange($event)" type="file" id="upload_file" multiple style="display: none"/>
- </li>
- chooseImage(){
- document.getElementById('upload_file').click(); // 触发 input-file 文件上传控件 事件 photoChange
- },
- photoChange(el) {
- var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
- var type = file.type.split('/')[0];
- if ( type === 'image' ){
- // 将图片 img 转化为 base64
- var reader = new FileReader();
- reader.readAsDataURL(file);
- var that = this;
- reader.onloadend = function () {
- var dataURL = reader.result;
- var blob = that.dataURItoBlob(dataURL);
- that.upload(blob); // 执行上传接口
- };
- }else{
- alert('上传了非图片');
- }
- },
- dataURItoBlob (dataURI) {
- // base64 解码
- let byteString = Windows.atob(dataURI.split(',')[1]);
- let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
- let T = mimeString.split('/')[1];
- let ab = new ArrayBuffer(byteString.length);
- let ia = new Uint8Array(ab);
- for (let i = 0; i <byteString.length; i++) {
- ia[i] = byteString.charCodeAt(i);
- }
- return new Blob([ab], {type: mimeString});
- },
- upload(imgUrl){
- let formData = new FormData();
- formData.append('file', file);
- this.$axios({
- method:'POST',
- url:'路径',
- headers: {
- 'Content-Type':'multipart/form-data',// 设置请求头请求格式为 JSON
- },
- data: formData
- }).then((response)=>{
- console.log("response",response);
- });
- },
来源: http://www.bubuko.com/infodetail-3169767.html