文章/答案/技术大牛

发布

社区首页 >问答首页 >VueJS/AdonisJs图像上传和使用

问VueJS/AdonisJs图像上传和使用
EN

Stack Overflow用户

提问于 2017-07-20 22:16:24

回答 1查看 2.2K关注 0票数 0

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

我目前有一个问题，我正在上传图片从我的前端到我的后端。AdonisJS生成本地存储路径。例如，我以以下形式从我的前端上传：

输入形式

在VueJS端使用以下代码：

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

它目前正在工作，但它生成了AdonisJS使用的路径：

ProjectFolder/backend/storage/1500586654324.jpg

VueJS位于：

ProjectFolder/frontend/*

我如何使用我上传的图像在前面？这些框架有什么方式可以耦合吗？

javascript

vue.js

vuejs2

vuex

adonis.js

回答 1

Stack Overflow用户

发布于 2017-09-09 08:03:31

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

您可以在Adonis中创建一个route来处理“媒体”路由(如~/media/1500586654324.jpg)。此路径将获取图像ID并将对应的图像发送到您的storage文件夹中。
您不会将图像上传到storage文件夹，而是将其直接放到应用程序的public文件夹中，这意味着您可以通过其URL直接访问图像。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45226072

复制

相似问题

问VueJS/AdonisJs图像上传和使用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJS/AdonisJs图像上传和使用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJS/AdonisJs图像上传和使用
EN