vue实现文件上传

前端之家收集整理的这篇文章主要介绍了vue实现文件上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. <!-- multiple多个文件上传 accept文件类型-->
  2. <input
  3. type="file"
  4. @change="addFile"
  5. ref="inputer"
  6. accept="application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf"
  7. >
  8. <p>支持文件格式:.ppt .pptx .doc .docx .pdf ,单个文件不能超过20M.</p>
  9. --------------------------------------------------------------------
  10. js
  11. export default {
  12. data() {
  13. return {
  14. formData: new FormData(),file: {},//文件数据
  15. }
  16. }
  17. }
  18. methods: {
  19. //上传文件
  20. addFile: function() {
  21. var _this = this;
  22. let inputDOM = this.$refs.inputer;
  23. // let oldLen = this.filLen;
  24. this.file = inputDOM.files[0];
  25. let len = this.file.length;
  26. let size = Math.floor(this.file.size / 1024);
  27. if (size > 20 * 1024 * 1024) {
  28. alert("请选择20M以内的图片!");
  29. return false;
  30. }
  31. this.formData.append("file",this.file);
  32. this.$http({
  33. method: "post",url: _this.HOST + api.upload,data: this.formData,headers: {
  34. "Content-Type": "multipart/form-data"
  35. }
  36. })
  37. .then(function(res) {
  38. })
  39. .catch(function(err) {
  40. console.log("新建分享",err);
  41. });
  42. },}

多个文件情况与单个文件其实一致的

猜你在找的Vue相关文章