当前位置:   article > 正文

vue中使用element的upload实现文件上传给后端_vue上传文件到后端

vue上传文件到后端
  1. <template>
  2. <div>
  3. <el-upload
  4. class="upload-demo"
  5. action=""
  6. :accept="accept"
  7. :http-request="uploadFile"
  8. :on-success="handleSuccess"
  9. :on-error="handleError"
  10. :on-progress="handleProgress"
  11. :on-exceed="handleExceed"
  12. :before-upload="beforeUpload"
  13. :limit="limit"
  14. :on-preview="handlePreview"
  15. :show-file-list="false"
  16. >
  17. <el-button
  18. size="small"
  19. type="success"
  20. plain
  21. >附件</el-button>
  22. </el-upload>
  23. <!-- <el-image ref="preview" style="display: none;" :src="url" :preview-src-list="[url]" /> -->
  24. </div>
  25. </template>
  26. <script>
  27. import { uploadFile } from '@/api/file' // 文件上传接口
  28. import { getFileURL } from '@/utils/file' // 获取文件地址接口
  29. export default {
  30. props: {
  31. multiple: { // 是否支持多选文件
  32. type: Boolean,
  33. default: false
  34. },
  35. limit: {
  36. type: Number,
  37. default: 9
  38. },
  39. agencyId: {
  40. type: [Number, String],
  41. default: ''
  42. },
  43. accept: { // .zip,.txt
  44. type: String,
  45. default: ''
  46. },
  47. size: {
  48. type: Number,
  49. default: 10
  50. },
  51. fileType: {
  52. type: Array,
  53. default: () => [
  54. 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt', 'png', 'jpg', 'bmp', 'jpeg'
  55. ]
  56. },
  57. data: { // 上传时附带的额外参数
  58. type: Object,
  59. default: () => {} // return {id: 1}
  60. },
  61. name: { // 上传的文件字段名
  62. type: String,
  63. default: 'file'
  64. },
  65. // listType: { // 文件列表的类型 text/picture/picture-card
  66. // type: String,
  67. // default: 'text'
  68. // },
  69. list: { // 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
  70. type: Array,
  71. default: () => []
  72. }
  73. },
  74. data() {
  75. return {
  76. fileList: [],
  77. url: ''
  78. }
  79. },
  80. watch: {
  81. list: {
  82. handler(newV) {
  83. this.assembleFileList(newV)
  84. },
  85. deep: true
  86. }
  87. },
  88. mounted() {
  89. this.assembleFileList(this.list)
  90. },
  91. methods: {
  92. /**
  93. * 组装文件列表
  94. * @param {*} fileArr
  95. */
  96. async assembleFileList(fileArr) {
  97. const file = JSON.parse(JSON.stringify(fileArr))
  98. const newFileList = []
  99. for (let index = 0; index < file.length; index++) {
  100. newFileList.push({
  101. name: file[index]?.name,
  102. size: file[index]?.size || '',
  103. url: await getFileURL(file[index].url),
  104. status: file[index]?.status || 'success',
  105. saveUrl: file[index].url
  106. })
  107. }
  108. this.fileList = newFileList
  109. },
  110. handleExceed(files, fileList) {
  111. this.$message.warning(`当前限制选择${this.limit}个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
  112. },
  113. /**
  114. * 上传之前的回调
  115. * @param {*} file
  116. */
  117. beforeUpload(file) {
  118. if (file.type !== '' || file.type !== null || file.type !== undefined) {
  119. // 截取文件的后缀,判断文件类型
  120. const FileExt = file.name.replace(/.+\./, '').toLowerCase()
  121. // 计算文件的大小
  122. const isLt5M = file.size / 1024 / 1024 < this.size // 这里做文件大小限制
  123. // 如果大于50M
  124. if (!isLt5M) {
  125. this.$message.error('上传文件大小不能超过 50MB!')
  126. return false
  127. }
  128. // 如果文件类型不在允许上传的范围内
  129. if (this.fileType.includes(FileExt)) {
  130. return true
  131. } else {
  132. this.$message.error('上传文件格式不正确!')
  133. return false
  134. }
  135. }
  136. },
  137. /**
  138. * 点击文件列表中已上传的文件时的钩子
  139. * @param {*} file
  140. */
  141. handlePreview(file) {
  142. console.log(file)
  143. this.url = file.url
  144. this.$refs.preview.clickHandler()
  145. },
  146. /**
  147. * 下载
  148. * @param {*} file
  149. */
  150. handleDownload(file) {
  151. },
  152. /**
  153. * 文件列表移除文件时的钩子
  154. * @param {*} file
  155. */
  156. handleRemove(file) {
  157. this.$emit('remove', file)
  158. },
  159. /**
  160. * 文件上传成功时的钩子
  161. * @param {*} response
  162. */
  163. handleSuccess(response, file) {
  164. this.$emit('success', response, file)
  165. },
  166. /**
  167. * 文件上传失败时的钩子
  168. * @param {*} _err
  169. */
  170. handleError(response, file) {
  171. this.$emit('error', response, file)
  172. },
  173. /**
  174. * 文件上传时的钩子[进度]
  175. * @param {*} file
  176. */
  177. handleProgress(file) {
  178. console.log(file, '进度')
  179. },
  180. /**
  181. * 自定义上传
  182. * @param {*} param
  183. */
  184. uploadFile(param) {
  185. const loading = this.$loading({
  186. lock: true,
  187. text: '正在读取表格,请稍后...',
  188. spinner: 'el-icon-loading',
  189. background: 'rgba(0, 0, 0, 0.7)'
  190. })
  191. // 获取上传的文件名
  192. const file = param.file
  193. // 发送请求的参数格式为FormData
  194. const formData = new FormData()
  195. // return
  196. formData.append('file', file)
  197. formData.append('agencyId', this.agencyId)
  198. for (const key in this.data) {
  199. formData.append(key, this.data[key])
  200. }
  201. // formData.set('file', param.file)
  202. console.log(param, file, this.agencyId, formData)
  203. // 调用param中的钩子函数处理各种情况,这样就可以用在组件中用钩子了。也可以用res.code==200来进行判断处理各种情况
  204. uploadFile(formData).then(res => {
  205. loading.close()
  206. if (res.code === 200) {
  207. console.log(res)
  208. this.$message.success('上传成功!')
  209. param.onSuccess(res, file)
  210. } else {
  211. console.log(res)
  212. this.$message.error('上传失败')
  213. param.onError(res, file)
  214. }
  215. }).catch(err => {
  216. loading.close()
  217. this.$message.error('上传失败')
  218. param.onError(err)
  219. })
  220. }
  221. }
  222. }
  223. </script>
  224. <style lang="scss" scoped>
  225. ::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
  226. display: none !important;
  227. }
  228. ::v-deep .el-upload--picture-card{
  229. border-radius: 0;
  230. border: 0;
  231. height: 100%;
  232. width: 100%;
  233. line-height: 100%;
  234. background: #fff;
  235. }
  236. </style>

使用

  1. <template>
  2. <div class="details">
  3. <uploadXlsx
  4. :limit="99"
  5. :list="list"
  6. style="margin-left:10px;"
  7. @success="success" // 绑定回调函数
  8. />
  9. </div>
  10. </template>
  11. <script>
  12. import uploadXlsx from '@/components/upload' // 引入文件
  13. export default {
  14. components: {
  15. uploadXlsx
  16. },
  17. data() {
  18. return {
  19. }
  20. },
  21. methods: {
  22. // 上传成功,回调
  23. success(res, file) {
  24. console.log(res, file.name, '上传成功')
  25. },
  26. }
  27. }
  28. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/171250
推荐阅读
相关标签
  

闽ICP备14008679号