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