關於vue開發

最近在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

})

}

})

})