1 <!-- 2 气味照相机,上传图片 3 --> 4 <template> 5 <div class="main_container" > 6 <div class="bgimg_box" :style="'background-image: url(' + bgImg + ');'"> 7 <div class="img_container" v-if="updateState == 0"> 8 <div class="title">点击选择上传图片</div> 9 <!-- <div class="idcard_pannel flex"> 10 <input type="file" accept="image/*" @change="chooseImg($event,'fileUpdate')"/> 11 <img :src="fileFront" alt=""> 12 </div> --> 13 <div class="img_upload"> 14 <van-uploader :after-read="afterRead" class="vloader"/> 15 </div> 16 </div> 17 <div class="img_container" v-if="updateState != 0"> 18 <div class="img_show" v-if="cuteState == 0"> 19 <VueCropper ref="vcropper" 20 :img='imgadjust' 21 :info=option.info 22 :outputSize=option.outputSize 23 :outputType=option.outputType 24 :autoCrop=option.autoCrop 25 :canMove=option.canMove 26 :autoCropWidth=option.autoCropWidth 27 :autoCropHeight=option.autoCropHeight 28 :original=option.original 29 :infoTrue=option.infoTrue 30 :centerBox=option.centerBox 31 :canMoveBox=option.canMoveBox 32 :fixedBox=option.fixedBox 33 :canScale=option.canScale 34 @real-time="realTime"> 35 </VueCropper> 36 </div> 37 <div class="img_cmd" v-if="cuteState == 0"> 38 <!-- <button @click="changeScale(1)" class="btn">+</button> 39 <button @click="changeScale(-1)" class="btn">-</button> --> 40 <button @click="imgcute" class="btn">裁剪</button> 41 </div> 42 <div class="img_show" v-if="cuteState == 1"> 43 <img :src="imgadjust" alt="" class="imgcuted"> 44 <div class="img_div"> 45 <img :src="btnReupdate" alt="" class="img_select"> 46 </div> 47 </div> 48 </div> 49 <footer class="footer"> 50 <div 51 class="next_btn" 52 :style="'background-image: url(' + btnImg + ');'" 53 @click="updateFileAction($event, updateState)"></div> 54 </footer> 55 </div> 56 </div> 57 </template> 58 <script> 59 import _ from '../../util/api' 60 import bgImg from '@/assets/img/updateimg/bg.png' 61 import selectImg from '@/assets/img/updateimg/uploadpictures.png' 62 import updateImg from '@/assets/img/updateimg/affirm.png' 63 import sucImg from '@/assets/img/updateimg/successfullyupload.png' 64 import reupdate from '@/assets/img/updateimg/choosephotos.png' 65 import { VueCropper } from 'vue-cropper' 66 67 export default { 68 name: 'camera', 69 data () { 70 return { 71 bgImg, 72 btnImg: selectImg, 73 btnReupdate: reupdate, 74 imageUrl: '', 75 params: { 76 picid: this.$route.query.phid || '' 77 }, 78 preimg: {}, 79 updateState: 0, // 0选择图片 1确认上传 2完成上传 80 cuteState: 0, // 0 未裁剪图片 1已经裁剪 81 imgadjust: {}, 82 option: { 83 outputSize: 1, 84 outputType: 'jpeg', 85 canScale: true, 86 autoCrop: true, 87 canMove: true, 88 autoCropWidth: 420, 89 autoCropHeight: 600, 90 fixed: true, 91 original: false, 92 infoTrue: false, 93 centerBox: false, 94 canMoveBox: true, 95 fixedBox: true, 96 enlarge: true 97 } 98 } 99 }, 100 components: { 101 VueCropper 102 }, 103 methods: { 104 updateFileAction (e, type) { 105 if (type == 0) { 106 console.log('当前状态1:' + type) 107 this.$error('请选择图片!') 108 } else if (type == 1) { 109 console.log('picid:' + this.params.picid) 110 const formData = new FormData() 111 formData.append('file', this.preimg) 112 formData.append('phid', this.params.picid) 113 114 _.uploadImgFile(formData).then(rsp => { 115 this.btnImg = sucImg 116 this.updateState = 2 117 this.cuteState = 1 118 console.log(rsp) 119 console.log('图片上传成功') 120 }, () => { 121 this.$error('图片上传失败') 122 }) 123 console.log('当前状态2:' + type) 124 } else if (type == 2) { 125 this.updateState = 0 126 this.cuteState = 0 127 this.btnImg = selectImg 128 this.preimg = {} 129 console.log('当前状态3:' + type) 130 } 131 }, 132 getObjectURL (file) { 133 var url = null 134 if (window.createObjectURL !== undefined) { // basic 135 url = window.createObjectURL(file) 136 } else if (window.URL !== undefined) { // mozilla(firefox) 137 url = window.URL.createObjectURL(file) 138 } else if (window.webkitURL !== undefined) { // webkit or chrome 139 url = window.webkitURL.createObjectURL(file) 140 } 141 return url 142 }, 143 transformToBase64 (file) { 144 if (!window.FileReader) { 145 console.log('浏览器对FileReader方法不兼容') 146 } else { 147 const reader = new FileReader() 148 reader.readAsDataURL(file)// 读出 base64 149 return reader.result 150 } 151 }, 152 afterRead (res) { 153 // console.log(res, '///') 154 if (res) { 155 this.updateState = 1 156 this.btnImg = updateImg 157 this.preimg = res.file 158 console.log('选择图片成功') 159 console.log(this.preimg) 160 const reader = new FileReader() 161 reader.readAsDataURL(this.preimg)// 读出 base64 162 this.imgadjust = this.getObjectURL(res.file) 163 console.log('加载选择图片:') 164 console.log(this.imgadjust) 165 } 166 }, 167 realTime(data) { 168 //console.log(data) 169 }, 170 imgcute() { 171 this.$refs.vcropper.getCropBlob((data) => { 172 let img = this.getObjectURL(data) 173 this.imgadjust = img 174 this.preimg = new File([data], `2022b8656c546dd2544301deb388f012c5d.png`); 175 this.cuteState = 1 176 }) 177 } 178 } 179 } 180 </script> 181 <style lang="less" scoped> 182 .main_container { 183 width: 100%; 184 min-height: 100vh; 185 position: relative; 186 187 .bgimg_box { 188 width: 100%; 189 position: relative; 190 min-height: 1333px; 191 height: 100vh; 192 display: flex; 193 justify-content: center; 194 background-repeat: no-repeat; 195 background-position: center; 196 background-size: 100% 100%; 197 198 .footer { 199 position: fixed; 200 bottom: 71px; 201 height: 71px; 202 justify-content: bottom; 203 z-index: 200; 204 205 .next_btn { 206 width: 201px; 207 height: 71px; 208 box-sizing: border-box; 209 background-position: center; 210 background-repeat: no-repeat; 211 background-size: cover; 212 font-size: 34px; 213 font-family: inpinzhusongti; 214 font-weight: 400; 215 font-style: italic; 216 color: #fff; 217 text-align: center; 218 } 219 } 220 } 221 222 .img_container { 223 width: 100%; 224 display: flex; 225 align-items: center; 226 flex-direction: column; 227 228 .title { 229 font-size: 56px; 230 font-weight:bold; 231 font-family:'Times New Roman', Times, serif; 232 margin-top: 300px; 233 } 234 235 .img_upload{ 236 width: 360px; 237 height: 360px; 238 position: relative; 239 text-align: center; 240 vertical-align: middle; 241 background-position: center; 242 background-repeat: no-repeat; 243 background-size: cover; 244 margin-top: 100px; 245 background-image: url('../../assets/img/updateimg/center.png'); 246 .vloader{ 247 position: relative; 248 top: 50%; 249 margin-top: 8px; 250 margin-left: 8px; 251 -webkit-transform: translateY(-50%); 252 -ms-transform: translateY(-50%); 253 transform: translateY(-50%); 254 } 255 } 256 257 .img_show{ 258 margin-top:30px; 259 width: 90%; 260 height: 80%; 261 text-align: center; 262 .imgcute{ 263 width: 100%; 264 margin-left: 20px; 265 margin-top: 50px; 266 margin-right: 20px; 267 } 268 .cropper{ 269 width: 100%; 270 height: 100%; 271 } 272 .imgcuted{ 273 margin: 0,auto; 274 width: 100%; 275 } 276 .img_div{ 277 width: 100%; 278 text-align:right; 279 .img_select{ 280 width: 108px; 281 height: 108px; 282 z-index: 200; 283 bottom: 100%; 284 right: 100%; 285 } 286 } 287 } 288 .img_cmd{ 289 margin-top: 5px; 290 width: 90%; 291 height: 48px; 292 align-items: center; 293 text-align: center; 294 .btn{ 295 width: 108px; 296 height: 48px; 297 margin-top: 10px; 298 margin-left: 15px; 299 margin-right: 15px; 300 background-color: rgb(63, 134, 34); 301 border-radius: 12px; 302 } 303 } 304 } 305 } 306 </style>
上传图片到服务端。
标签:VUE,console,log,img,上传,100%,width,margin,图片 From: https://www.cnblogs.com/kingkie/p/17341365.html