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

@import"~@/styles/mixin.scss";.upload-container{宽度：100%;位置：相对；@includeclearfix；.image-uploader{宽度：35%；向左飘浮;}.image-preview{宽度：200px；高度：200px；位置：相对；边框：1px虚线#d9d9d9；向左飘浮;左边距：50px；.image-preview-wrapper{位置：相对；宽度：100%；高度：100%；img{宽度：100%；他光：100%；}}.image-preview-action{位置：绝对；宽度：100%；高度：100%；左：0；顶部：0；游标：默认；文本对齐：居中；颜色：#fff；不透明度：0；字体大小：20px；背景色：rgba(0,0,0,.5);过渡：不透明度.3s；游标：指针；文本对齐：居中；行高：200px；.el-icon-delete{字体大小：36px；}}&:hover{.image-preview-action{不透明度：1;}}}.image-app-preview{宽度：320px；高度：180px；位置：相对；边框：1px虚线#d9d9d9；向左飘浮;左边距：50px；.app-fake-conver{高度：44px；位置：绝对；宽度：100%；//背景：rgba(0,0,0,.1);文本对齐：居中；行高：64px；颜色：#fff；}}}前言vue-element-admin自带一个上传图片组件。在使用过程中，发现上传速度很慢，尤其是上传一些大图片需要几十秒。熊。发生这种情况是因为上传组件会将图像上传到action="https://httpbin.org/post"并返回转换为base64编码格式的数据。格式类似：data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsIC.....而且有可能这个base64编码比上传的源文件大。这样有两个缺点：多了一步上传文件到第三方网站（https://httpbin.org/post），转码base64，大部分时间浪费在这一步。服务器收到base64编码的内容后，需要处理成文件单独保存（base64编码的内容太长，一般不会直接存入数据库），给服务器带来不便。还有一点就是这种图片必须和表单的其他内容一起提交，有时上传和表单的其他项目是分开提交的。接下来说一下如何单独上传图片到服务的实现步骤：具体代码在下面项目github：https://github.com/guyan0319/...码云（国内）：https://gitee.com/jason0319/g...例1.解决上传删除如下图1.新建文件vue-element-admin\src\utils\global.js内容如下consthttphost='http://localhost:8090'export{httphost}这是服务器的地址，你可以根据自己的需要调整。2、修改上传组件代码，在SingleImage3.vue中上传图片并引入上面定义的服务器地址httphost+'/upload/image',dataObj:{token:'',key:''}}}，将action=``"https://httpbin.org/post"改为：action="uploadUrl"图片上传成功onsuccess绑定的handleImageSuccess函数添加res，即服务端返回上传结果。修改代码如下这。emitInput(res.data)}，服务器返回的json格式为{"code":20000,"data":"http://localhost:8090/showimage?imgname=upload/20200620/tX5vS810l2Fl0K02I0YJLEjLEjLEw9OH7hc.jpg"}required这里注意el-upload增加了：with-credentials='true'支持发送cookie凭证信息，上传文件到服务器需要判断验证登录。删除图片通过上面的修改上传图片，然后处理上传的文件删除文件api/article.js添加导出函数delImage(url){returnrequest({url:'',method:'get',params:{url},baseURL:httphost+'/del/image'})}ModifySingleImage3.vue//introducedelImageimport{delImage}from'@/api/article'rmImage(){delImage(this.value).then(response=>{if(response.code===20000){this.emitInput('')return}this.$message({message:'删除失败',type:'error',showClose:true})}).catch(err=>{console.log(err)})}，服务端删除文件，返回json{"code":20000,"data":"success"}最后贴上SingleImage3修改后的完整代码.vue@import"~@/styles/mixin.scss";.upload-container{宽度：100%;位置：相对；@includeclearfix；.image-uploader{宽度：35%；向左飘浮;}.image-preview{宽度：200px；高度：200px；位置：相对；边框：1px虚线#d9d9d9；向左飘浮;左边距：50px；.image-preview-wrapper{位置：相对；宽度：100%；高度：100%；img{宽度：100%；他光：100%；}}.image-preview-action{位置：绝对；宽度：100%；高度：100%；左：0；顶部：0；游标：默认；文本对齐：居中；颜色：#fff；不透明度：0；字体大小：20px；背景色：rgba(0,0,0,.5);过渡：不透明度.3s；游标：指针；文本对齐：居中；行高：200px；.el-icon-delete{字体大小：36px；}}&:hover{.image-preview-action{不透明度：1;}}}.image-app-preview{宽度：320px；高度：180px；位置：相对；边框：1px虚线#d9d9d9；向左飘浮;左边距：50px；.app-fake-conver{高度：44px；位置：绝对；宽度：100%；//背景：rgba(0,0,0,.1);文本对齐：居中；行高：64px；颜色：#fff；}}}示范二、解决如下图所示的上传需要修改vue-element-adminsrccomponentsTinymcecomponentsEditorImage。vue文件，处理方式和示例一点不多，这里只有贴代码.editor-slide-upload{margin-bottom:20px;/deep/.el-upload--picture-card{宽度：100%；}}至此，vue-element-admin就完成了单独上传图片的实现。如果您有任何问题或建议，请提交问题，链接目录