vue 選擇本地文件目錄
先看效果
原碼片斷
通過的vue結合原生的input 進行本地文件系統目錄、路徑的選擇（不需要ActiveXObject，任何瀏覽器都支持）
先看效果
傳統的文件處理會有一些文件上傳相關的插件，但有時候會有一些需求是不能簡單選擇一個文件上傳就能解決的，如果要本地文件目錄中的文件進行相關的邏輯處理，就比較麻煩，然后我做了本地一個文件目錄選擇的例子，只要得到目錄地址，后面想怎么操作就看大家發揮了, 先看代碼：
注解：
1處這里是一個普通的html 按鈕，值得注意的是這里需要多加一個 webkitdirectory 參數，表示文件夾選擇器。
2處是選擇過后中，在頁面中回顯的入口，可根據自己需求處理
3處是做為vue的事件觸發入口 ，回樣可根據自己需要來。
大概就這些，有什么不懂的或有什么想法可以留言交流。
原碼片斷
大概就這些，有什么不懂的或有什么想法可以留言交流.
<el-form ref="form" :model="form" label-width="120px" style="width: 50%">
<el-form-item label="保存至文件夾">
<input type="file" id="file" hidden @change="fileChange" webkitdirectory>
<el-input placeholder="請輸入內容" v-model="form.imgSavePath" class="input-with-select">
<el-button slot="append" icon="el-icon-folder" type="success" @click="btnChange"></el-button>
</el-input>
</el-form-item>
</el-form>
data() {
return {
form: {
imgSavePath: ''
}
}
},
methods: {
fileChange(e) {
try {
const fu = document.getElementById('file')
if (fu == null) return
this.form.imgSavePath = fu.files[0].path
console.log(fu.files[0].path)
} catch (error) {
console.debug('choice file err:', error)
}
},
btnChange() {
var file = document.getElementById('file')
file.click()
}
}
————————————————
版權聲明：本文為CSDN博主「duuuper」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/yxs646512415/article/details/109097588