upload.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <div class="upload-file">
  3. <el-upload
  4. :action="action"
  5. :before-upload="handleBeforeUpload"
  6. :file-list="fileList"
  7. :drag="drag"
  8. :limit="count"
  9. :multiple="count > 1 ? true : false"
  10. :on-remove="handleDelete"
  11. :accept="accept"
  12. :on-error="handleUploadError"
  13. :on-exceed="handleExceed"
  14. :on-success="handleUploadSuccess"
  15. :on-change="handChange"
  16. :show-file-list="true"
  17. :auto-upload="false"
  18. class="upload-file-uploader"
  19. ref="upload"
  20. list-type="picture-card"
  21. >
  22. <i class="el-icon-plus"></i>
  23. <!-- <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  24. <div class="el-upload__tip" style="margin-top: 0">只能上传.jpg,.jpeg,.png文件</div> -->
  25. </el-upload>
  26. </div>
  27. </template>
  28. <script>
  29. export default {
  30. name: 'upload-file',
  31. components: {},
  32. props: {
  33. // 值
  34. value: [String, Object, Array],
  35. // 大小限制(MB)
  36. fileSize: {
  37. type: Number,
  38. default: 2,
  39. },
  40. count: {
  41. type: Number,
  42. default: 4,
  43. },
  44. // 文件类型, 例如['png', 'jpg', 'jpeg']
  45. fileType: {
  46. type: Array,
  47. default: () => [
  48. '.jpg',
  49. '.jpeg',
  50. '.png',
  51. // ".doc",
  52. // '.xls',
  53. // '.xlsx',
  54. // ".ppt",
  55. // ".txt",
  56. // ".pdf",
  57. // '.csv',
  58. ],
  59. },
  60. // 是否显示提示
  61. isShowTip: {
  62. type: Boolean,
  63. default: true,
  64. },
  65. },
  66. data() {
  67. return {
  68. drag: true,
  69. // 已选择文件列表
  70. fileList: [],
  71. // 是否显示文件上传弹窗
  72. visible: false,
  73. // 可上传的文件类型
  74. accept: '',
  75. action: 'action',
  76. }
  77. },
  78. filters: {},
  79. computed: {},
  80. mounted() {},
  81. watch: {},
  82. created() {
  83. // 拼接
  84. this.fileType.forEach((el) => {
  85. this.accept += el
  86. this.accept += ','
  87. })
  88. this.fileType.slice(0, this.fileList.length - 2)
  89. },
  90. methods: {
  91. // 上传前校检格式和大小
  92. handleBeforeUpload(file) {
  93. // 校检文件类型
  94. if (this.fileType) {
  95. let fileExtension = ''
  96. if (file.name.lastIndexOf('.') > -1) {
  97. fileExtension = file.name.slice(file.name.lastIndexOf('.'))
  98. }
  99. const isTypeOk = this.fileType.some((type) => {
  100. if (file.type.indexOf(type) > -1) return true
  101. if (fileExtension && fileExtension.indexOf(type) > -1) return true
  102. return false
  103. })
  104. if (!isTypeOk) {
  105. this.$message.error(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
  106. return false
  107. }
  108. }
  109. // 校检文件大小
  110. if (this.fileSize) {
  111. const isLt = file.size / 1024 / 1024 < this.fileSize
  112. if (!isLt) {
  113. this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
  114. return false
  115. }
  116. }
  117. return true
  118. },
  119. // 文件个数超出
  120. handleExceed() {
  121. this.$message.error(`只允许上传${this.count}个文件`)
  122. },
  123. // 上传失败
  124. handleUploadError(err) {
  125. this.$message.error('上传失败, 请重试')
  126. },
  127. // 上传成功回调
  128. handleUploadSuccess(res, file) {
  129. this.$message.success('上传成功')
  130. this.cancel()
  131. },
  132. /** 文件状态改变时调用 */
  133. handChange(file, fileList) {
  134. this.fileList = fileList
  135. console.log(this.fileList)
  136. },
  137. // 删除文件
  138. handleDelete(file, list) {
  139. var index = this.fileList.findIndex((v) => v.uid === file.uid)
  140. if (index > -1) {
  141. this.fileList.splice(index, 1)
  142. }
  143. },
  144. // 获取文件名称
  145. getFileName(name) {
  146. if (name.lastIndexOf('/') > -1) {
  147. return name.slice(name.lastIndexOf('/') + 1).toLowerCase()
  148. } else {
  149. return ''
  150. }
  151. },
  152. /** 手动提交上传 */
  153. submitUpload() {
  154. if (this.fileList.length <= 0) {
  155. this.msgError('请选择文件上传')
  156. return false
  157. }
  158. const formData = new FormData()
  159. // 把多个文件放到同一个请求里,这样只会请求一次接口。否则一个文件就会请求一次
  160. this.fileList.forEach((el) => {
  161. formData.append('file', el.raw)
  162. })
  163. },
  164. /** 关闭上传弹框 */
  165. cancel() {
  166. this.fileList = []
  167. this.visible = false
  168. },
  169. },
  170. }
  171. </script>