Skip to content

1-添加上传前回调。2-上传成功事件带上off函数用于重置组件。3-调整file参数位置，适应oss 上传 #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

1-添加上传前回调。2-上传成功事件带上off函数用于重置组件。3-调整file参数位置，适应oss 上传 #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
892e25b
添加上传前回调
kunrui Aug 22, 2019
50bf084
flx oss
adminZYN Aug 22, 2019
b59fce5
add off back
adminZYN Aug 22, 2019
759bd17
add success back img
adminZYN Aug 23, 2019
bb93f20
edit no url
adminZYN Aug 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-image-crop-upload",
"version": "2.5.0",
"name": "rui-vue-image-crop-upload",
"version": "2.5.18",
"description": "a vue plgin for image upload and crop（vue图片剪裁上传插件）",
"main": "upload-2.vue",
"scripts": {
Expand Down Expand Up @@ -71,5 +71,8 @@
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-stream": "^3.2.0"
},
"directories": {
"example": "example"
}
}
30 changes: 20 additions & 10 deletions upload-2.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,10 @@ export default {
method: {
type: String,
'default': 'POST'
},
beforeUpload: {
type: Function,
'default': () => {}
}
},
data() {
Expand Down Expand Up @@ -780,22 +784,21 @@ export default {
ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale);
that.createImgUrl = canvas.toDataURL(mime);
},
prepareUpload(){
async prepareUpload(){
let {
url,
createImgUrl,
field,
ki
} = this;
this.$emit('crop-success', createImgUrl, field, ki);
if(typeof url == 'string' && url){
this.upload();
}else{
this.off();
}

await this.upload();
},
// 上传图片
upload() {
async upload() {
await this.beforeUpload(this.createImgUrl, this.field, this.ki)

let that = this,
{
lang,
Expand All @@ -811,7 +814,12 @@ export default {
method
} = this,
fmData = new FormData();
fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat);

// 检查是否有url
if(typeof url != 'string' || !url){
this.off();
return;
}

// 添加其他参数
if (typeof params == 'object' && params) {
Expand All @@ -820,6 +828,8 @@ export default {
})
}

fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat);

// 监听进度回调
const uploadProgress = function(event) {
if (event.lengthComputable) {
Expand Down Expand Up @@ -858,7 +868,7 @@ export default {
function(resData) {
if (that.value) {
that.loading = 2;
that.$emit('crop-upload-success', resData, field, ki);
that.$emit('crop-upload-success', resData, createImgUrl, field, ki, that.off);
}
},
// 上传失败
Expand All @@ -867,7 +877,7 @@ export default {
that.loading = 3;
that.hasError = true;
that.errorMsg = lang.fail;
that.$emit('crop-upload-fail', sts, field, ki);
that.$emit('crop-upload-fail', sts, createImgUrl, field, ki, that.off);
}
}
);
Expand Down