vue中如何使用html5实现文件上传
这篇文章主要为大家展示了“vue中如何使用html5实现文件上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中如何使用html5实现文件上传”这篇文章吧。
成都创新互联是一家专注于成都网站设计、做网站与策划设计,青州网站建设哪家好?成都创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:青州等地区。青州做网站价格咨询:18982081108
1.图片上传
// 上传图片 'fileSelected': function () { var that = this let files = document.getElementById('fileToUpload').files if (files && files.length) { var fd = new FormData() fd.append('file', files[0]) var reader = new window.FileReader() // 图片大小 100KB var fileSize = 100 * 1024 reader.readAsDataURL(files[0]) reader.onload = function (e) { if (e.target.result.length > fileSize) { that.$dispatch('show-alert', 'msg_1016') document.getElementById('fileToUpload').value = '' } else { var xhr = new XMLHttpRequest() xhr.addEventListener('load', that.uploadComplete, false) xhr.open('POST', that.$root.appBaseUrl + 'fileUpload/singleFileUpload') xhr.send(fd) } } } }, // 上传成功 'uploadComplete': function (evt) { this.personInfo.photoUrl = (evt.target.responseText).replace('\\', '/') document.getElementById('fileToUpload').value = '' }, // 删除图片 'deleteImg': function () { this.personInfo.photoUrl = '' },
computed: { headPreFix: function () { let params = window.localdicts.dicts.ph_params.systemParam if (params.storageType === 1) { return params.storageUrl } return this.$root.appBaseUrl } }
以上是“vue中如何使用html5实现文件上传”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站栏目:vue中如何使用html5实现文件上传
文章源于:http://myzitong.com/article/ppedcs.html