Question

我正在构建一个需要显示一些图像的webapp，前端是使用VueJS构建的，而后端是使用AdonisJS构建的。

我目前遇到的问题是我正在将图片从我的前端上传到我的后端。 AdonisJS生成本地存储路径。例如，我以这种形式从我的前端上传：

在VueJS方面使用此代码：

df$Stringvector <- c(1,2,1,1,2,1,2)

在AdonisJS方面：

let formData = new FormData();
      let imagefile = document.querySelector('#file');
      formData.append("image", imagefile.files[0]);
      axios.post('/users/' + this.user.id + "/image", formData, {
          headers: {
            'Content-Type': 'image/*'
          }
      })

目前正在工作，但这会产生AdonisJS使用的路径：

* updateProfilePicture(request, response) {
    const image = request.file('image', { 
        maxSize: '20mb',
        allowedExtensions: ['jpg', 'png', 'jpeg']
    }) 

    const userId = request.param('id'); 
    const user = yield User.findOrFail(userId)

    const fileName = `${new Date().getTime()}.${image.extension()}` 
    yield image.move(Helpers.storagePath(), fileName) 

    if (!image.moved()) {
        response.badRequest(image.errors())
        return
    }
    user.profilepicture = image.uploadPath() 

    yield user.save();
    response.ok(user);
}

VueJS位于：

ProjectFolder/backend/storage/1500586654324.jpg

如何在前端使用我上传的图片？有没有办法将这些框架结合起来？

Answer 1

有多种方法可以通过浏览器访问此图像。

您在Adonis中创建route来处理“媒体”路线（如~/media/1500586654324.jpg）。此路线将采用图像ID并在storage文件夹中发送相应的图像。
您不会将图像上传到storage文件夹，而是直接将其放入应用程序的public文件夹中，这意味着您可以通过其URL直接访问该图像。 / p>

我更喜欢使用第一个选项，因为我的public目录是100％通过脚本生成的。

VueJS / AdonisJs图片上传和使用

1 个答案: