2019獨角獸企業重金招聘Python工程師標準>>>

1. 點擊按鈕上傳文件，獲取到文件名，后綴，文件大小，上傳日期等

2.展現方式

3.實現方法

<div class="updateFiles"><group><cell class="addAnnex" title="上傳附件" @click.native.stop="openFile"><input type="file" @change="fileChange()" style="display: none" ref="file"><i class="fa fa-file"></i></cell></group><group><div class="fileList" v-for="(item,index) in filesList" :key="index"><div class="left"><div class="left-img"><img slot="icon-active" :src="item.filesExtension | filesExtension"></div><div class="cont"><div class="text">{{item.fileName}}</div><div class="date">{{item.fileSize}}M {{item.fileDate}}上傳</div></div></div><div class="right" @click="delFiles(item, index)"><img slot="icon-active" src="../../../../assets/dataImg/icon_delete.png"></div></div></group> </div><script> import {filesExtension} from '../clue/js/validate.js' // 這里是通過后綴名判斷顯示圖標，不需要請移除 export default {data() {return {filesList: [],files: {fileName: '', // 文件名filesExtension: '', // 擴展名fileDate: '', // 上傳時間fileSize: '', // 上傳大小fileData: '' // 文件數據},}},filters: {filesExtension(val) {return filesExtension(val)}},methods: {// 刪除文件delFiles(item, index) {this.filesList.splice(index,1)},// 上傳文件openFile(){this.$refs.file.click();},fileChange() {let myfile = this.$refs.fileif (myfile.files[0] == undefined) {Toast('未上傳任何文件！');} else {var filevalue = myfile.value;var index = filevalue.lastIndexOf('.');this.files.fileName = myfile.files[0].namethis.files.filesExtension = filevalue.substring(index)let date = new Date()const Y = date.getFullYear()let m = date.getMonth() + 1let d = date.getDate()let H = date.getHours()let i = date.getMinutes()let s = date.getSeconds()m = m < 10 ? '0' + m : md = d < 10 ? '0' + d : dH = H < 10 ? '0' + H : Hi = i < 10 ? '0' + i : is = s < 10 ? '0' + s : sthis.files.fileDate = Y + '-' + m + '-' + d + ' ' + H + ':' + i + ':' + sthis.files.fileSize = parseFloat(myfile.files[0].size / 1024 / 1024).toPrecision(2)let self = thisself.getBase64(myfile.files[0]).then(res => {let unLoadFileData = resself.files.fileData = res.split(',')[1]self.filesList.push({fileName: self.files.fileName, // 文件名filesExtension: self.files.filesExtension, // 擴展名fileDate: self.files.fileDate, // 上傳時間fileSize: self.files.fileSize, // 上傳大小fileData: self.files.fileData})})self.$emit('getFilesList', self.filesList)}},getBase64(file) {return new Promise(function(resolve, reject) {let reader = new FileReader()let results = ''reader.readAsDataURL(file) // 讀出 base64reader.onload = function () {results = reader.result}reader.onerror = function (error) {reject(error)}reader.onloadend = function () {resolve(results)}})}} } </script><style lang="less" scoped> .updateFiles{.addAnnex{width: 80%;padding: 11px 0;background: #f0f0f0;text-align: center;font-size: 14px;margin: 20px auto;border:1px solid #e0e0e0;border-radius: 5px;}.fileList{width: 100%;display: flex;justify-content: space-between;padding:1em;border-bottom: 1px solid #f0f0f0;background: #fff;.left{width: 80%;display: flex;justify-content: left;.left-img{width: 3em;height: 3em;margin-right: .5em;display: flex;justify-content: center;align-items: center;img{display: inline-block;width: 3em;}}.left-notimg{background: #f0f0f0;}.cont{display: flex;flex-wrap: wrap;align-items: center;.text{font-size: 14px;color: #4d4d4d;padding-bottom: .3em;display: flex;justify-content: left;flex-wrap: wrap;}.date{font-size: 12px;color: #bbb;width: 100%;}}}.right{width: 20%;display: flex;justify-content: flex-end;align-items: center;}} } </style>

?

轉載于:https://my.oschina.net/lemonfive/blog/3026379

總結

以上是生活随笔為你收集整理的Vue采用input实现文件上传与删除的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。