Skip to content

Commit 9ca04dd

Browse files
JackPuJackPu
committed
upload new files
1 parent fa3ed09 commit 9ca04dd

File tree

6 files changed

+189
-5
lines changed

6 files changed

+189
-5
lines changed

‎site/client/components/App.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<router-view></router-view>
1010
</div>
1111
</div>
12-
12+
1313
<ft></ft>
1414
</div>
1515
</template>
@@ -27,7 +27,7 @@ export default {
2727
'nav-list': navList,
2828
'ft': ft,
2929
},
30-
30+
3131
created() {
3232
this.$router.beforeEach((to, from, next) => {
3333
this.$Progress.start()

‎site/client/components/doc/cn/CropImage.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
<p>你可以将 crop 设置为 local 来实现本地裁剪。本地裁剪完成后发送给服务端接口的图片便是已经裁剪好的图片。</p>
99
<div class="center">
1010
<div class="user">
11-
<img class="avatar" :src="cropSrc"/>
11+
<img class="avatar" :src="src"/>
1212
</div>
1313
<vue-core-image-upload
1414
crop-ratio="1:1"
1515
:class="['btn', 'btn-primary']"
1616
crop="local"
17-
url="http://101.198.151.190/api/crop.php"
17+
url="http://101.198.151.190/api/upload.php"
1818
extensions="png,jpeg,jpg"
1919
text="Crop Image"
2020
compress="20"
@@ -91,6 +91,7 @@ export default {
9191
},
9292
data() {
9393
return {
94+
src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
9495
cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
9596
cropArgs: {
9697
toCropImgH: '?',
@@ -102,6 +103,9 @@ export default {
102103
},
103104
104105
methods: {
106+
cropLocalImageUploaded(res) {
107+
this.src = res.data.src;
108+
},
105109
crpoServerImageUploaded(res) {
106110
if (res.errcode === 0) {
107111
if (res.data.src) {

‎site/client/components/doc/en/CompressImage.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div class="components">
3+
<h3>Compress Image</h3>
4+
<p>Props <code>compress</code> means the quality of the image you want to compress via browser
5+
and then send the compressed image to the server. </p>
6+
<div class="center">
7+
<p><img width="300" :src="src" /></p>
8+
<vue-core-image-upload
9+
:class="['btn', 'btn-primary']"
10+
@imageuploaded="imageUploded"
11+
:max-file-size="5242880"
12+
compress="50"
13+
url="http://101.198.151.190/api/upload.php" >
14+
</vue-core-image-upload>
15+
</div>
16+
<h4>Code example</h4>
17+
<pre v-highlightjs><code class="html">&lt;vue-core-image-upload
18+
:class="['btn', 'btn-primary']"
19+
@imageuploaded="imageUploded"
20+
:max-file-size="5242880"
21+
compress="50"
22+
url="http://101.198.151.190/api/upload.php" &gt;
23+
&lt;/vue-core-image-upload&gt;</code></pre>
24+
</div>
25+
</template>
26+
27+
<script>
28+
29+
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
30+
export default {
31+
components: {
32+
VueCoreImageUpload,
33+
},
34+
data() {
35+
return {
36+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
37+
};
38+
},
39+
40+
methods: {
41+
imageUploded(res) {
42+
this.src = res.data.src;
43+
}
44+
}
45+
46+
};
47+
48+
</script>

‎site/client/components/doc/en/CropImage.vue‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<template>
2+
<div class="components">
3+
<h3>Crop Image</h3>
4+
<p>Set <code>crop</code> value to help you crop the image. </p>
5+
<p class="warnning"> if you setted the crop props, you can not upload multiple files.</p>
6+
<p>You have two values to select，<strong>local crop:<code>local</code></strong>or<strong>server-side crop: <code>server</code></strong>.</p>
7+
<h4>Local Crop</h4>
8+
<p><code>crop="local"</code> The Browser will crop the image via canvas API and send the cropped image to the server.</p>
9+
<div class="center">
10+
<div class="user">
11+
<img class="avatar" :src="src"/>
12+
</div>
13+
<vue-core-image-upload
14+
crop-ratio="1:1"
15+
:class="['btn', 'btn-primary']"
16+
crop="local"
17+
url="http://101.198.151.190/api/upload.php"
18+
extensions="png,jpeg,jpg"
19+
text="Crop Image"
20+
compress="20"
21+
@imageuploaded="crpoServerImageUploaded">
22+
</vue-core-image-upload>
23+
</div>
24+
<h4>Server-side crop</h4>
25+
<p><code>crop="server"</code> means the bwowser will send the original image to the server and post the cropped data below to the server:</p>
26+
<img style="width:480px;" src="http://img1.vued.vanthink.cn/vuedbb5d2173fa90af576b66f7077a87bfdb.jpeg" />
27+
<p>Each filed introduce:</p>
28+
<ul>
29+
<li><code>toCropImgX</code>: The x-axis distance between the crop area and the image</li>
30+
<li><code>toCropImgY</code>: The y-axis distance between the crop area and the image</li>
31+
<li><code>toCropImgW</code>: The width of crop area</li>
32+
<li><code>toCropImgH</code>: The height of crop area</li>
33+
<li><code>maxWidth</code>: The maximum width of the crop image</li>
34+
<li><code>maxHeight</code>: The maximum height of the crop image</li>
35+
</ul>
36+
<h4>Code example</h4>
37+
<p>上传图片后可以看到裁剪的参数</p>
38+
<div class="center">
39+
<div class="user">
40+
<img class="avatar" :src="cropSrc"/>
41+
</div>
42+
<vue-core-image-upload
43+
crop-ratio="1:1"
44+
:class="['btn', 'btn-primary']"
45+
crop="server"
46+
url="http://101.198.151.190/api/crop.php"
47+
extensions="png,gif,jpeg,jpg"
48+
text="Crop Image"
49+
@imageuploaded="crpoServerImageUploaded">
50+
</vue-core-image-upload>
51+
</div>
52+
<table class="m-table bordered" style="width:100%;">
53+
<thead>
54+
<tr>
55+
<th>H</th>
56+
<th>W</th>
57+
<th>X</th>
58+
<th>Y</th>
59+
</tr>
60+
</thead>
61+
<tbody>
62+
<tr>
63+
<td>{{cropArgs.toCropImgH}}</td>
64+
<td>{{cropArgs.toCropImgW}}</td>
65+
<td>{{cropArgs.toCropImgX}}</td>
66+
<td>{{cropArgs.toCropImgY}}</td>
67+
</tr>
68+
</tbody>
69+
</table>
70+
<pre v-highlightjs><code class="HTML">&lt;vue-core-image-upload
71+
crop-ratio="1:1"
72+
:class="['btn', 'btn-primary']"
73+
crop="server"
74+
url="http://101.198.151.190/api/crop.php"
75+
extensions="png,gif,jpeg,jpg"
76+
text="Crop Image"
77+
@imageuploaded="crpoServerImageUploaded"&gt;
78+
&lt;/vue-core-image-upload&gt;
79+
80+
</code></pre>
81+
<a href>View Code Source</a>
82+
</div>
83+
</template>
84+
85+
<script>
86+
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
87+
export default {
88+
components: {
89+
VueCoreImageUpload
90+
},
91+
data() {
92+
return {
93+
src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
94+
cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
95+
cropArgs: {
96+
toCropImgH: '?',
97+
toCropImgW: '?',
98+
toCropImgX: '?',
99+
toCropImgY: '?'
100+
}
101+
};
102+
},
103+
104+
methods: {
105+
cropLocalImageUploaded(res) {
106+
this.src = res.data.src;
107+
},
108+
crpoServerImageUploaded(res) {
109+
if (res.errcode === 0) {
110+
if (res.data.src) {
111+
this.src = res.data.src;
112+
return;
113+
}
114+
this.name = res.data.name;
115+
this.cropArgs = {
116+
toCropImgH: parseInt(res.data.post.toCropImgH),
117+
toCropImgW: parseInt(res.data.post.toCropImgW),
118+
toCropImgX: parseInt(res.data.post.toCropImgX),
119+
toCropImgY: parseInt(res.data.post.toCropImgY)
120+
}
121+
this.cropSrc = 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png';
122+
}
123+
}
124+
}
125+
};
126+
127+
</script>

‎site/client/router/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import EnProps from '../components/doc/en/Props.vue';
99
import CnEvents from '../components/doc/cn/Events.vue';
1010
import EnEvents from '../components/doc/en/Events.vue';
1111
import CnCropImage from '../components/doc/cn/CropImage.vue';
12+
import EnCropImage from '../components/doc/en/CropImage.vue';
1213
import CnMultipleFile from '../components/doc/cn/MultipleFile.vue';
1314
import EnMultipleFile from '../components/doc/en/MultipleFile.vue';
1415
import CnCompressImage from '../components/doc/cn/CompressImage.vue';
@@ -64,6 +65,10 @@ export default new Router({
6465
path: '/cn/crop-image',
6566
component: CnCropImage
6667
},
68+
{
69+
path: '/en/crop-image',
70+
component: EnCropImage
71+
},
6772
{
6873
path: '/cn/multiple-file',
6974
component: CnMultipleFile

‎site/src/vue-core-image-upload.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@
157157
this.tryAjaxUpload(() => {
158158
btn.value = btn.value.replace('...','');
159159
btn.disabled = false;
160-
}, true, code);
160+
}, code ? true: false, code);
161161
};
162162
if (this.crop === 'local') {
163163
const targetImage = cropBox.getCropImage();

0 commit comments

Comments
 (0)