关于vue开发

2019独角兽企业重金招聘Python工程师标准>>>

最近在vue开发中遇到了一些问题（对图片进行裁剪的插件croppa在封装blob时遇到的坑）：

1.引入croppa:

import Vue from 'vue'

import Croppa from 'vue-croppa'

2.html片段

<croppa v-model="tempData.croppa" ref="supervisionUploader"

:width="600"

:height="300"

placeholder-color="#000"

:remove-button-size="25"

placeholder="请选择一张图片"

:placeholder-font-size="24">

</croppa>

 

3.这是遇到坑的地方

this.formData = new FormData()

var that = this

//获取croppa的blob对象

this.croppa.generateBlob((blob) => {

let file = that.croppa.getChosenFile()

let croppaFile = new File([blob], file.name)   //将blob对象转换成文件

that.formData.append('croppedImage', croppaFile)  //封装到formdata中

addBanner(that.formData).then(response => {      //调用接口

if (response.status === 200 && response.data.result !== 'error') {

that.getList()

that.$notify({

title: '成功',

message: '添加成功',

type: 'success',

duration: 2000

})

} else {

that.$notify({

title: '失败',

message: '添加失败',

type: 'error',

duration: 2000

})

}

})

})

转载于:https://my.oschina.net/u/3762697/blog/1633909