Skip to content
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.

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

使用url后端不能接收图片 #237

Open
jdleung opened this issue Apr 21, 2021 · 3 comments
Open

使用url后端不能接收图片 #237

jdleung opened this issue Apr 21, 2021 · 3 comments

Comments

@jdleung
Copy link

jdleung commented Apr 21, 2021

您好,后端api要求这样的格式上传,这个也在Vue-element的上传控件在实现上传成功。添加vue-image-crop-upload后,在url在输入完整的api url,但图片无法上传。应该是api中设定的image

请问如何设置可以上传成功?谢谢

var fd = new FormData()
fd.append('image', fileObj.file)
apis.uploadPhoto(fd)
@dai-siki
Copy link
Owner

组件prop的field设为“image"试试

@jdleung
Copy link
Author

jdleung commented Apr 22, 2021

好的,谢谢

@jdleung
Copy link
Author

jdleung commented Apr 24, 2021

@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))
        })
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants