vue-image-crop-upload
vue-image-crop-upload copied to clipboard
使用url后端不能接收图片
您好,后端api要求这样的格式上传,这个也在Vue-element的上传控件在实现上传成功。添加vue-image-crop-upload后,在url在输入完整的api url,但图片无法上传。应该是api中设定的image
。
请问如何设置可以上传成功?谢谢
var fd = new FormData()
fd.append('image', fileObj.file)
apis.uploadPhoto(fd)
组件prop的field设为“image"试试
好的,谢谢
@dai-siki 设置了field为image后尝试还是没成功
<my-upload
v-model="show"
field="image"
:width="300"
:height="300"
:url="uploadApiUrl"
:headers="headers"
img-format="png"
@crop-success="cropSuccess"
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
/>
API的请求是以下这样的,以上的headers也按这个改了,params就是问题中提到的FormData,试过按要求加上和去掉也一样不行
return request({
url: url,
method: 'post',
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
})
最后尝试在cropSuccess内这样写可以上传,但问题是每次vue-image-crop-upload都会显示不成功,如何跳过?
cropSuccess(imgDataUrl, field) {
fetch(imgDataUrl)
.then(res => res.blob())
.then(blob => {
const file = new File([blob], 'imageFile.jpg')
var fd = new FormData()
fd.append('image', file)
apis.uploadPhoto(fd)
.then(res => console.log(res))
.catch(err => console.log(err))
})
}