單文件上傳是指上傳一個文件,一般用于表單中的個人資料圖片或者其他文件的上傳。在Vue中,我們可以通過Vue插件進行簡單的單文件上傳。
首先,我們需要安裝一個Vue插件,該插件叫做vue-upload-component。該插件可以讓我們很輕松的實現單文件上傳功能。我們可以通過npm安裝該插件:
npm install vue-upload-component --save
安裝好后,在Vue中注冊組件:
import VueUploadComponent from 'vue-upload-component'
Vue.component('file-upload', VueUploadComponent)
接下來,我們可以在Vue組件中使用該組件:
<file-upload v-model="file" accept="image/*" name="file"></file-upload>
data() {
return {
file: null
}
}
上面的代碼中,我們使用了v-model指令來將上傳的文件綁定到file變量中,并且限制了文件格式為image。我們可以通過name屬性給文件一個自定義的名稱,這樣在發送POST請求的時候,可以通過該名稱獲取該文件。
最后,我們需要在后臺處理上傳的文件。我們可以使用express-fileupload中間件來處理文件上傳。
const fileUpload = require('express-fileupload');
const express = require('express')
const app = express()
app.use(fileUpload());
app.post('/uploadFile', (req, res) => {
const file = req.files.file;
file.mv(`/uploads/${file.name}`, err => {
if (err) {
return res.status(500).send(err);
}
res.send(`File uploaded!`);
});
})
在上面的代碼中,我們使用了fileUpload中間件來處理文件上傳。上傳的文件可以通過req.files.file來獲取。該文件可以通過mv方法移動到指定目錄下。最后,我們返回一個上傳成功的提示。
總結來說,Vue單文件上傳可以通過vue-upload-component插件來輕松完成。該插件提供了v-model指令來方便的獲取上傳的文件。在后臺處理上傳的文件時,可以使用express-fileupload中間件來進行處理。我們只需要通過req.files.file獲取上傳的文件,然后通過mv方法移動到指定目錄下即可。
上一篇vue單文件+缺點
下一篇python 網絡圖庫