VUE上传图片 - 湘灵

VUE上传图片
  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>
上传图片到服务端。
posted on 2023-04-21 18:13 湘灵阅读(18) 评论(0) 编辑收藏举报