VueJS/AdonisJs圖像上傳和使用

我正在構建一個web應用程序，需要顯示一些圖像，前端使用VueJS構建，後端使用AdonisJS構建。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/*

我如何用我上傳的圖片在前臺？有什麼方法可以將這些框架結合起來？

來源

2017-07-20 L. Poelman

有多種方式可以通過瀏覽器訪問此圖像。

創建內阿多尼斯一個route處理「媒體」路線（如~/media/1500586654324.jpg）。此路線將拍攝圖像ID併發送storage文件夾中的相應圖像。
不要將您的圖像上傳到您的storage文件夾，而是把它們直接進入應用程序的文件夾public這意味着你可以直接通過其URL訪問圖像。

我更喜歡使用第一個選項，因爲我的public目錄是100％通過腳本生成的。

來源

2017-09-09 08:03:31

VueJS/AdonisJs圖像上傳和使用

回答

相關問題