11.1.2 vue-element-admin 上传图片慢问题处理

前言

vue-element-admin自带上传图片组件，在使用的过程中发现上传速度很慢，尤其是上传一些大图需要耗时几十秒不能忍受。出现这种情况，是因为upload组件会将图片上传到action="https://httpbin.org/post" ，并返回转换成base64编码格式的数据。

格式类似：

  1. data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsIC.....

而且有可能这个base64编码比上传源文件还要大。

这样做有两个缺点：

还有一点就这种是必须图片和表单其他内容一起提交，有的时候上传和表单其他项分开提交。

接下来讲一下如何将图片单独上传到服务的实现步骤：

具体代码在以下项目里

github:

https://github.com/guyan0319/go-admin

码云（国内）:

https://gitee.com/jason0319/go-admin

示例一、解决如下图所示的上传和删除

vue-element-admin 上传图片慢问题处理 - 图1

1、新建文件

  1. vue-element-admin\src\utils\global.js

内容如下

  1. const httphost = 'http://localhost:8090'
  2. export { httphost }

这个是服务端的地址，可以根据需要自己调整。

2、修改上传组件代码在SingleImage3.vue

上传图片

引入上面定义的服务器地址

  1. import { httphost } from '@/utils/global'

data()增加uploadUrl

  1. data() {
  2.     return {
  3.       tempUrl: '',
  4.       uploadUrl: httphost + '/upload/image',
  5.       dataObj: { token: '', key: '' }
  6.     }
  7.   },

将

  1. action=``"https://httpbin.org/post"

修改为

  1.  :action="uploadUrl"

图片上传成功on-success绑定的handleImageSuccess函数增加了res，即服务端返回上传结果。

修改代码如下

  1. handleImageSuccess(res, file) {
  2.       if (res.code !== 20000){
  3.         this.$message({
  4.           message: '上传失败',
  5.           type: 'error',
  6.           showClose: true
  7.         })
  8.         return false
  9.       }
  10.       this.emitInput(res.data)
  11.     },

服务端返回的json格式为

  1. {
  2.     "code":20000,
  3.     "data":"http://localhost:8090/showimage?imgname=upload/20200620/tX5vS810l2Fl0K02I0YJLEjLEw9OH7hc.jpg"
  4. }

这里需要注意el-upload增加

  1. :with-credentials='true'

支持发送 cookie 凭证信息，上传文件到服务器端需要判断验证登录。

删除图片

通过以上修改实现上传图片，接下处理上传文件删除

文件api/article.js 增加

  1. export function delImage(url) {
  2.   return request({
  3.     url: '',
  4.     method: 'get',
  5.     params: { url },
  6.     baseURL: httphost + '/del/image'
  7.   })
  8. }

修改SingleImage3.vue

  1. //引入delImage
  2. import { delImage } from '@/api/article'
  2.  rmImage() {
  3.       delImage(this.value).then(response => {
  4.         if (response.code === 20000){
  5.           this.emitInput('')
  6.           return
  7.         }
  8.         this.$message({
  9.           message: '删除失败',
  10.           type: 'error',
  11.           showClose: true
  12.         })
  13.       }).catch(err => {
  14.         console.log(err)
  15.       })
  16.     },

服务端删除文件返回json

  1. {"code":20000,"data":"success"}

最后贴一下SingleImage3.vue修改后完整的代码

  1. <template>
  2.   <div class="upload-container">
  3.     <el-upload
  4.       :data="dataObj"
  5.       :multiple="false"
  6.       :show-file-list="false"
  7.       :with-credentials='true'
  8.       :on-success="handleImageSuccess"
  9.       class="image-uploader"
  10.       drag
  11.       :action="uploadUrl"
  12.     >
  13.       <i class="el-icon-upload" />
  14.       <div class="el-upload__text">
  15.         将文件拖到此处，或<em>点击上传</em>
  16.       </div>
  17.     </el-upload>
  18.     <div class="image-preview image-app-preview">
  19.       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
  20.         <img :src="imageUrl">
  21.         <div class="image-preview-action">
  22.           <i class="el-icon-delete" @click="rmImage" />
  23.         </div>
  24.       </div>
  25.     </div>
  26.     <div class="image-preview">
  27.       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
  28.         <img :src="imageUrl">
  29.         <div class="image-preview-action">
  30.           <i class="el-icon-delete" @click="rmImage" />
  31.         </div>
  32.       </div>
  33.     </div>
  34.   </div>
  35. </template>
  37. <script>
  38. import { getToken } from '@/api/qiniu'
  39. import { delImage } from '@/api/article'
  40. import { httphost } from '@/utils/global'
  41. // import { Cookies } from 'js-cookie'
  42. export default {
  43.   name: 'SingleImageUpload3',
  44.   props: {
  45.     value: {
  46.       type: String,
  47.       default: ''
  48.     }
  49.   },
  50.   data() {
  51.     return {
  52.       tempUrl: '',
  53.       uploadUrl: httphost + '/upload/image',
  54.       dataObj: { token: '', key: '' }
  55.     }
  56.   },
  57.   computed: {
  58.     imageUrl() {
  59.       return this.value
  60.     }
  61.   },
  62.   methods: {
  63.     rmImage() {
  64.       delImage(this.value).then(response => {
  65.         if (response.code === 20000){
  66.           this.emitInput('')
  67.           return
  68.         }
  69.         this.$message({
  70.           message: '删除失败',
  71.           type: 'error',
  72.           showClose: true
  73.         })
  74.       }).catch(err => {
  75.         console.log(err)
  76.       })
  77.     },
  78.     emitInput(val) {
  79.       this.$emit('input', val)
  80.     },
  82.     handleImageSuccess(res, file) {
  83.       if (res.code !== 20000){
  84.         this.$message({
  85.           message: '上传失败',
  86.           type: 'error',
  87.           showClose: true
  88.         })
  89.         return false
  90.       }
  91.       this.emitInput(res.data)
  92.     },
  93.     beforeUpload() {
  94.       const _self = this
  95.       return new Promise((resolve, reject) => {
  96.         getToken().then(response => {
  97.           const key = response.data.qiniu_key
  98.           const token = response.data.qiniu_token
  99.           _self._data.dataObj.token = token
  100.           _self._data.dataObj.key = key
  101.           this.tempUrl = response.data.qiniu_url
  102.           resolve(true)
  103.         }).catch(err => {
  104.           console.log(err)
  105.           reject(false)
  106.         })
  107.       })
  108.     }
  109.   }
  110. }
  111. </script>
  113. <style lang="scss" scoped>
  114. @import "~@/styles/mixin.scss";
  115. .upload-container {
  116.   width: 100%;
  117.   position: relative;
  118.   @include clearfix;
  119.   .image-uploader {
  120.     width: 35%;
  121.     float: left;
  122.   }
  123.   .image-preview {
  124.     width: 200px;
  125.     height: 200px;
  126.     position: relative;
  127.     border: 1px dashed #d9d9d9;
  128.     float: left;
  129.     margin-left: 50px;
  130.     .image-preview-wrapper {
  131.       position: relative;
  132.       width: 100%;
  133.       height: 100%;
  134.       img {
  135.         width: 100%;
  136.         height: 100%;
  137.       }
  138.     }
  139.     .image-preview-action {
  140.       position: absolute;
  141.       width: 100%;
  142.       height: 100%;
  143.       left: 0;
  144.       top: 0;
  145.       cursor: default;
  146.       text-align: center;
  147.       color: #fff;
  148.       opacity: 0;
  149.       font-size: 20px;
  150.       background-color: rgba(0, 0, 0, .5);
  151.       transition: opacity .3s;
  152.       cursor: pointer;
  153.       text-align: center;
  154.       line-height: 200px;
  155.       .el-icon-delete {
  156.         font-size: 36px;
  157.       }
  158.     }
  159.     &:hover {
  160.       .image-preview-action {
  161.         opacity: 1;
  162.       }
  163.     }
  164.   }
  165.   .image-app-preview {
  166.     width: 320px;
  167.     height: 180px;
  168.     position: relative;
  169.     border: 1px dashed #d9d9d9;
  170.     float: left;
  171.     margin-left: 50px;
  172.     .app-fake-conver {
  173.       height: 44px;
  174.       position: absolute;
  175.       width: 100%; // background: rgba(0, 0, 0, .1);
  176.       text-align: center;
  177.       line-height: 64px;
  178.       color: #fff;
  179.     }
  180.   }
  181. }
  182. </style>

示例二、解决如下图所示的上传

vue-element-admin 上传图片慢问题处理 - 图2

需要修改vue-element-admin\src\components\Tinymce\components\EditorImage.vue文件，处理方式和示例一差不多，这里只贴代码

  1. <template>
  2.   <div class="upload-container">
  3.     <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
  4.       upload
  5.     </el-button>
  6.     <el-dialog :visible.sync="dialogVisible">
  7.       <el-upload
  8.         :multiple="true"
  9.         :file-list="fileList"
  10.         :show-file-list="true"
  11.         :with-credentials='true'
  12.         :on-remove="handleRemove"
  13.         :on-success="handleSuccess"
  14.         :before-upload="beforeUpload"
  15.         class="editor-slide-upload"
  16.         :action="uploadUrl"
  17.         list-type="picture-card"
  18.       >
  19.         <el-button size="small" type="primary">
  20.           Click upload
  21.         </el-button>
  22.       </el-upload>
  23.       <el-button @click="dialogVisible = false">
  24.         Cancel
  25.       </el-button>
  26.       <el-button type="primary" @click="handleSubmit">
  27.         Confirm
  28.       </el-button>
  29.     </el-dialog>
  30.   </div>
  31. </template>
  33. <script>
  34. // import { getToken } from 'api/qiniu'
  35. import { delImage } from '@/api/article'
  36. import { httphost } from '@/utils/global'
  37. export default {
  38.   name: 'EditorSlideUpload',
  39.   props: {
  40.     color: {
  41.       type: String,
  42.       default: '#1890ff'
  43.     }
  44.   },
  45.   data() {
  46.     return {
  47.       dialogVisible: false,
  48.       uploadUrl: httphost + '/upload/image',
  49.       listObj: {},
  50.       fileList: []
  51.     }
  52.   },
  53.   methods: {
  54.     checkAllSuccess() {
  55.       return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
  56.     },
  57.     handleSubmit() {
  58.       const arr = Object.keys(this.listObj).map(v => this.listObj[v])
  59.       if (!this.checkAllSuccess()) {
  60.         this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
  61.         return
  62.       }
  63.       this.$emit('successCBK', arr)
  64.       this.listObj = {}
  65.       this.fileList = []
  66.       this.dialogVisible = false
  67.     },
  68.     handleSuccess(response, file) {
  69.       const uid = file.uid
  70.       const objKeyArr = Object.keys(this.listObj)
  71.       for (let i = 0, len = objKeyArr.length; i < len; i++) {
  72.         if (this.listObj[objKeyArr[i]].uid === uid) {
  73.           this.listObj[objKeyArr[i]].url = response.data
  74.           // this.listObj[objKeyArr[i]].url = response.files.file
  75.           this.listObj[objKeyArr[i]].hasSuccess = true
  76.           return
  77.         }
  78.       }
  79.     },
  80.     handleRemove(file) {
  81.       const uid = file.uid
  82.       const objKeyArr = Object.keys(this.listObj)
  83.       for (let i = 0, len = objKeyArr.length; i < len; i++) {
  84.         if (this.listObj[objKeyArr[i]].uid === uid) {
  85.           delImage(this.listObj[objKeyArr[i]].url).then(response => {
  86.             if (response.code !== 20000) {
  87.               this.$message('删除失败')
  88.               return
  89.             }
  90.             delete this.listObj[objKeyArr[i]]
  91.           }).catch(err => {
  92.             console.log(err)
  93.           })
  95.           return
  96.         }
  97.       }
  98.     },
  99.     beforeUpload(file) {
  100.       const _self = this
  101.       const _URL = window.URL || window.webkitURL
  102.       const fileName = file.uid
  103.       this.listObj[fileName] = {}
  104.       return new Promise((resolve, reject) => {
  105.         const img = new Image()
  106.         img.src = _URL.createObjectURL(file)
  107.         img.onload = function() {
  108.           _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
  109.         }
  110.         resolve(true)
  111.       })
  112.     }
  113.   }
  114. }
  115. </script>
  117. <style lang="scss" scoped>
  118. .editor-slide-upload {
  119.   margin-bottom: 20px;
  120.   /deep/ .el-upload--picture-card {
  121.     width: 100%;
  122.   }
  123. }
  124. </style>

至此，vue-element-admin 单独上传图片实现方式就讲完了，如有任何问题或建议欢迎提issues，

links

  • 目录
  • 上一节：
  • 下一节：