精华内容
下载资源
问答
  • ElementUI 上传文件以及限制

    千次阅读 2021-02-04 09:31:00
    现有项目中,涉及文件上传。要求: 1. 文件必须是excel 2. 只能上传1个文件 3. 文件大小不能超过5M 二、Upload 上传 注意:ElementUIUpload 上传,需要和后端api结合才能使用。 演示环境使用django,版本为:3.1.5 ...

    一、概述

    现有项目中,涉及文件上传。要求:

    1. 文件必须是excel

    2. 只能上传1个文件

    3. 文件大小不能超过5M 

    二、Upload 上传

    注意:ElementUI Upload 上传,需要和后端api结合才能使用。

    演示环境使用django,版本为:3.1.5

    新建django项目

    新建django项目,项目名为upload_demo,app名为api

     安装以下模块

    Django==3.1.5
    djangorestframework==3.11.1
    django-cors-headers==3.5.0
    

    以上是我环境的版本,这里不做强制要求,安装最新版本即可。

    注意:django-cors-headers是用来解决跨域问题的。

    修改upload_demo/settings.py

    注册app

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'api.apps.ApiConfig',
        'rest_framework',
        'corsheaders',  # 注册应用cors
    ]
    

    中间件增加

    MIDDLEWARE = [
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'django.middleware.common.CommonMiddleware',
        'django.middleware.csrf.CsrfViewMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
        'corsheaders.middleware.CorsMiddleware', # 注册组件cors
    ]
    

    最后一行增加

    #跨域增加忽略
    CORS_ALLOW_CREDENTIALS = True
    CORS_ORIGIN_ALLOW_ALL = True
    # CORS_ORIGIN_WHITELIST = (
    #     'http://',
    # )
    
    CORS_ALLOW_METHODS = (
        'DELETE',
        'GET',
        'OPTIONS',
        'PATCH',
        'POST',
        'PUT',
        'VIEW',
    )
    
    CORS_ALLOW_HEADERS = (
        'XMLHttpRequest',
        'X_FILENAME',
        'accept-encoding',
        'authorization',
        'content-type',
        'dnt',
        'origin',
        'user-agent',
        'x-csrftoken',
        'x-requested-with',
        'Pragma',
    )
    

    修改api/views.py,增加视图函数

    from rest_framework.views import APIView
    from upload_demo import settings
    from django.shortcuts import render, redirect, HttpResponse
    from django.http import JsonResponse
    from rest_framework import status
    import os
    import uuid
    
    
    class File(APIView):
        def post(self, request):
            print(request.FILES)
            # 接收文件
            file_obj = request.FILES.get('file', None)
            print("file_obj", file_obj.name)
    
            # 判断是否存在文件夹
            head_path = os.path.join(settings.BASE_DIR,'upload')
            print("head_path", head_path)
            # 如果没有就创建文件路径
            if not os.path.exists(head_path):
                os.makedirs(head_path)
    
            # 判断文件大小不能超过5M
            if file_obj.size > 5242880:
                return JsonResponse({'status': status.HTTP_403_FORBIDDEN, 'msg': '文件过大'},
                                    status=status.HTTP_403_FORBIDDEN)
    
            # 文件后缀
            suffix = file_obj.name.split(".").pop()
            print("文件后缀", suffix)  # 图片后缀 png
    
            # 判断文件后缀
            suffix_list = ["xlsx","xls"]
            if suffix not in suffix_list:
                return JsonResponse({'status': status.HTTP_403_FORBIDDEN, 'msg': '只能选择excel文件'},
                                    status=status.HTTP_403_FORBIDDEN)
    
            # 重命名文件名
            file_name = '%s.%s'%(uuid.uuid4(),suffix)
            print("file_name",file_name)
            # 储存路径
            file_path = os.path.join(head_path,file_name)
            print("储存路径", file_path)
    
            # 写入文件到指定路径
            with open(file_path, 'wb') as f:
                for chunk in file_obj.chunks():
                    f.write(chunk)
    
            data = {}
            data['name'] = file_name
            return JsonResponse({'status': status.HTTP_200_OK, 'data': data}, status=status.HTTP_200_OK)
    
    View Code

    修改upload_demo/urls.py

    from django.contrib import admin
    from django.urls import path
    from api import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('file/excel_upload/',views.File.as_view())
    ]
    

    启动django项目,访问链接为:http://127.0.0.1:8000/

    新建vue测试页

    安装axios

    npm install axios --save
    

    test.vue

    <template>
      <div style="width: 70%;margin-left: 30px;margin-top: 30px;">
        <el-upload ref="upload"
                   class="upload-demo" :multiple='false' :auto-upload='true' list-type='text' :show-file-list='true'
                   :before-upload="beforeUpload" :drag='true' action='' :limit="1" :on-exceed="handleExceed"
                   :http-request="uploadFile" accept=".xlsx" >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text"><em>点击上传,仅限excel文件</em></div>
          <!--        <div class="el-upload__tip" slot="tip">仅限excel文件</div>-->
        </el-upload>
        <el-button type="primary" @click="onSubumit">提交</el-button>
      </div>
    </template>
    
    <script>
      // 导入模块
      import axios from 'axios'
      export default {
        components: {
          axios
        },
        data() {
          return {
            isUpload:false,  // 是否上传文件
          }
        },
        mounted: function() {
        },
        methods: {
          // 上传文件之前的钩子
          beforeUpload(file) {
            //判断文件格式
            let hz = file.name.split('.').pop()
            // console.log("hz",hz)
            if (hz != 'xlsx' && hz != 'xls') {
              this.$message.error(`只能选择excel文件`)
              return false
            }
    
            // 判断文件大小
            let fileSize = file.size / 1024 / 1024 < 5
            if (!fileSize) {
              this.$message.error('上传文件大小不能超过 5MB')
              return false
            }
    
            this.isUpload = true
          },
          // 上传文件个数超过定义的数量
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`)
          },
    
          // 上传文件
          uploadFile(item) {
            let _this = this
            let fileObj = item.file
            const form = new FormData()// FormData 对象
            form.append('file', fileObj)// 文件对象  'upload'是后台接收的参数名
            axios({
              url: 'http://127.0.0.1:8000/file/excel_upload/',
              data: form,
              method: 'POST',
              contentType: 'multipart/form-data',
              processData: false //告诉jquery不要对form进行处理
              // contentType: false, //指定为false才能形成正确的Content-Type
            })
              .then(function(res) {
                // console.log('上传成功', res)
                // console.log("上传路径",res.data.excel_file_path)
                _this.$message.success("上传成功")
              })
              .catch(function(err) {
                let res = err.response
                // console.log('失败', res)
                _this.$message.error(res.data.msg)
              })
          },
          // 检查是否上传
          onSubumit(){
            if (this.isUpload == false){
              this.$message.error("请上传excel文件")
              return false
            } else {
              this.$message.success("文件已上传")
              return true
            }
          },
        }
      }
    </script>
    
    <style>
    </style>
    
    View Code

    请自行修改路由

    访问vue测试页,效果如下:

    上传非excel文件,效果如下:

    上传大于5M的excel文件,效果如下:

    上传正确的excel文件,效果如下:

    查看接口返回信息,效果如下:

    查看django项目的upload目录,就可以看到上传的文件了。

    展开全文
  • vue下elementUI的导入压缩文件

    千次阅读 2020-07-18 17:17:40
    点击导入地图 * 请导入zip压缩文件 //data变量 data(){ return { limitNum: 1, // 上传时,同时允许上传的最大数 fileList: [], // zip文件列表 uploadfile: new File([], ""), uploadProvince: "", ...
    <el-upload
      :limit="limitNum"
      :auto-upload="false"
      ref="upload"
      accept=".zip"
      :action="UploadUrl()"
      :before-upload="beforeUploadFile"
      :on-change="fileChange"
      :on-exceed="exceedFile"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :file-list="fileList">
        <el-button size="small" type="primary">点击导入地图</el-button>
           <div slot="tip" class="el-upload__tip">* 请导入zip压缩文件</div>
    </el-upload>

         //data变量

        data(){

          return {  

          limitNum: 1,  // 上传时,同时允许上传的最大数

          fileList: [],   // zip文件列表

          uploadfile: new File([], ""),

          uploadProvince: "",

          uploadCity: "",

          uploadMapName: "",

          mapName: "",  //地图名称

          province: "",

          city: "",

          formData: new FormData(),

          }

         }    

    //上传文件js(methods方法)    
    // 文件超出个数限制时的钩子      
    exceedFile(files, fileList) {        
      this.$message.warning(`只能选择 ${this.limitNum} 个文件,当前共选择了 ${files.length + fileList.length} 个`);      
    },      
    // 文件状态改变时的钩子      
    fileChange(file, fileList) {        
      this.formData.delete('file');        
      this.$refs.upload.clearFiles();        
      this.fileList = [];        
      this.fileList.push(file.raw) ;        
      this.formData.append('file', file.raw);     //后台请求参数为Content-Type:multipart/form-data      
    },      
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传      beforeUploadFile(file) {        
      let extension = file.name.substring(file.name.lastIndexOf('.')+1);        
      let size = file.size / 1024 / 1024;        
      if(extension !== 'zip') {          
        this.$message.warning('只能上传后缀是.zip的文件');   //控制文件类型        
      }        
      if(size > 10) {          
        this.$message.warning('文件大小不得超过10M');    //控制文件大小        
      }      
    },      
    // 文件上传成功时的钩子      
    handleSuccess(res, file, fileList) {        
      this.$message.success('文件上传成功');        
      this.$refs.upload.clearFiles()      
    },      
    // 文件上传失败时的钩子      
    handleError(err, file, fileList) {        
      this.$message.error('文件上传失败');      
    },      
    UploadUrl:function(){       // 因为action参数是必填项,我们使用二次确认进行文件上传时,直接填上传文件的url会因为没有参数导致api报404,所以这里将action设置为一个返回为空的方法就行,避免抛错        return ""      
    },      
    //导入文件    
    uploadFileFun() {      
      if(this.uploadMapName==""){             
        this.$message.warning('请输入地图名称');              
        return;      
      }      
      if(this.uploadProvince==""||this.uploadCity=="" || this.uploadProvince == "------- 省 --------" || this.uploadCity == '--- 市 ---'){          
        this.$message.warning('请选择省市');          
        return;      
      }      
      if (this.fileList.length === 0){          
        this.$message.warning('请上传文件');            
        return;      
      }         
      var FileExt = this.fileList[0].name.replace(/.+\./, "");             
      if (['zip'].indexOf(FileExt.toLowerCase()) === -1){     
        this.$message({               
           type: 'warning',               
           message: '请上传后缀名为zip的附件!'           
        });               
        return false;             
      } else {        
        let pams = {          
          file: this.fileList,          
          name: this.uploadMapName,          
          province: this.uploadProvince,          
          city: this.uploadCity        
        };        
      this.formData.delete('name');     //避免每次导入重新添加    
      this.formData.delete('province');        
      this.formData.delete('city');        
      this.formData.append('name',pams.name)  
      this.formData.append('province',pams.province)  
      this.formData.append('city',pams.city)        
      this.loading = true;        
      //这里需要验证处理 TODO        
      importMap(this.formData)   //此为调后台接口        
      .then(response => {          
         if (response.data.code == 0) {            
           this.$message({ message: "导入成功", type: "success" });            
           this.loading = false;           
           this.getList(this.page);    //刷新表格列表的方法            
           this.clearInfo();          //清空对话框相关信息的方法     
         } else {            
           this.$message({ message: "导入失败", type: "error" });            
           this.loading = false;            
           this.dialogVisible = false;          
         }        
       })        
      .catch(response => {          
         this.loading = false;          
         this.dialogVisible = false;          
         //this.$message({ message: "导入失败", type: "error" });        
      });      
     }    
    }

     当初导入不成功可能为没采用formData形式来进行参数的传递,nginx也可能会限制较大压缩文件的的成功上传

    展开全文
  • 主要为大家详细介绍了Vue+Element-UI实现上传图片并压缩功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 项目中由于后台接口的原因,写了两种上传方式 ...针对这两种方式,记录下,如何压缩上传图片 自动上传压缩图片 模板代码: <el-upload class="upload-demo marginBom" :action="fileUrl + 'file'" :data="{

    项目中由于后台接口的原因,写了两种上传方式
    1.自动上传
    2.手动上传
    针对这两种方式,记录下,如何压缩上传图片

    1. 自动上传时压缩图片
      模板代码:
                        <el-upload
                          class="upload-demo marginBom"
                          :action="fileUrl + 'file'"
                          :data="{
                            customerId: clientTableRowData.id,
                            sourceId: clientTableRowData.id,
                            sourceTable: 'harmonize_customer',
                          }"
                          :on-success="fileUpSuc"
                          :on-error="fileUpErr"
                          :show-file-list="false"
                          :before-upload="beforeUpload"
                          :headers="myHeaders"
                        >
                          <el-button
                            v-if="clientTableRowData.stopStatus !== 1"
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            >添加附件</el-button
                          >
                          <!-- <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件,且不超过500kb
              </div> -->
                        </el-upload>
    

    使用before-upload这个钩子函数,上传之前做什么,这里用到一个插件 image-Conversion
    1.安装

    npm i image-conversion --save
    

    2.需要压缩的vue文件引用

    import * as imageConversion from 'image-conversion';
    

    上传前处理压缩图片的完整代码

        beforeUpload(file) {
          const _that = this
          const isJpgOrPng =
            file.type === "image/jpeg" || file.type === "image/png";
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJpgOrPng) {
            this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
            return false;
          }
          return new Promise((resolve) => {
            // 小于2M 不压缩
             if (isLt2M) {
              resolve(file)
            }
            // 压缩到400KB,这里的400就是要压缩的大小,可自定义
            imageConversion.compressAccurately(file, 400).then((res) => {
              console.log(res);
              resolve(res);
            });
            //compressAccurately有多个参数时传入对象
            //imageConversion.compressAccurately(file, {
            // size: 1024, //图片大小压缩到1024kb
            // width:1280 //宽度压缩到1280
            //}).then(res => {
            //resolve(res)
            //})
          });
        },
    

    在这里插入图片描述
    before-upload可以接收一个Promise回调,imageConversion它也是异步的。

    2.手动上传
    接口要以file类型随表单一起提交,这时就不能自动上传了,那么 el-upload组件的auto-upload这个属性就为false.
    auto-upload为false 会导致 before-upload失效。但可以用 on-change钩子函数代替
    在这里插入图片描述
    但是这个钩子函数 不能接受Promise回调,所以使用imageConversion异步返回一个resolve结果,没办法接收,所以这里用到另一个压缩图片的方法,使用canvas画布压缩,
    下面的压缩函数,可以放到你的公用工具js里

    /** 图片压缩,默认同比例压缩
     *  @param {Object} fileObj
     *  图片对象
     *  回调函数有一个参数,base64的字符串数据
     */
    export function compress(fileObj, callback) {
        try {
          const image = new Image()
          image.src = URL.createObjectURL(fileObj)
          image.onload = function() {
            const that = this
            // 默认按比例压缩
            let w = that.width
            let h = that.height
            const scale = w / h
            w = fileObj.width || w
            h = fileObj.height || (w / scale)
            let quality = 0.7 // 默认图片质量为0.7
            // 生成canvas
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            // 创建属性节点
            const anw = document.createAttribute('width')
            anw.nodeValue = w
            const anh = document.createAttribute('height')
            anh.nodeValue = h
            canvas.setAttributeNode(anw)
            canvas.setAttributeNode(anh)
            ctx.drawImage(that, 0, 0, w, h)
            // 图像质量
            if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {
              quality = fileObj.quality
            }
            // quality值越小,所绘制出的图像越模糊
            const data = canvas.toDataURL('image/jpeg', quality)
            // 压缩完成执行回调
            const newFile = convertBase64UrlToBlob(data)
            callback(newFile)
          }
        } catch (e) {
          console.log('压缩失败!')
        }
      }
      function convertBase64UrlToBlob(urlData) {
        const bytes = window.atob(urlData.split(',')[1]) // 去掉url的头,并转换为byte
        // 处理异常,将ascii码小于0的转换为大于0
        const ab = new ArrayBuffer(bytes.length)
        const ia = new Uint8Array(ab)
        for (let i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i)
        }
        return new Blob([ab], { type: 'image/png' })
      }
    
    

    项目中的实例
    模板代码:

                    <el-upload
                      class="upload-demo"
                      ref="uploadPrice"
                      action="#"
                      :auto-upload="false"
                      :on-change="fileChange"
                      :on-success="priceSuc"
                      :show-file-list="false"
                      :limit="5"
                      multiple
                    >
                      <el-button slot="trigger" size="mini" type="primary"
                        >添加附件</el-button
                      >
                    </el-upload>
    

    js:

        fileChange(file, fileList) {
          this.$refs.uploadPrice.clearFiles();
          let _this = this;
          let obj = {
            imgUrl: "",
            name: "",
          };
          let fileListData = [];
          for (let x = 0; x < fileList.length; x++) {
            let item1 = fileList[x];
            this.GLOBAL.compress(item1.raw, function (val) {
              let newfile = new window.File([val], file.name, { type: file.type });
              newfile.uid = file.uid;
              fileListData.push(newfile);
            });
            var file = item1.raw;
            obj.name = item1.name;
            var reader = new FileReader();
            reader.onload = function (e) {
              //转base64
              obj.imgUrl = e.target.result;
                _this.fileArr.push(obj); 
            };
            reader.readAsDataURL(file);
          }
          this.$set(this.form, "fileList", fileListData);
          // console.log(this.form.fileList);
        },
    

    我是将这个方法注册到全局,压缩函数 返回的val 是Blob类型
    在这里插入图片描述
    在这里插入图片描述
    如果你的接口要求用file类型 下面的这行代码,将Blob类型转化为file类型
    在这里插入图片描述
    图片的压缩质量可以根据需要调整
    在这里插入图片描述
    以上就是elementUI压缩图片的两个方法,还有其他的好的方法,可以研究下。

    展开全文
  • 主要为大家详细介绍了Vue Element UI + OSS实现上传文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • message: '上传文件只能是pdf格式!', type: 'error' }); return false;//必须加上return false; 才能阻止 } if(!isLt50M) { this.$message({ message: '上传文件大小不能超过 50MB...

    https://blog.csdn.net/chanlingmai5374/article/details/80558444  看了这位老哥的说法 在看看文档 才发现自己没认真看文档

     

     

    <el-upload
              :beforeUpload="beforeAvatarUploadPdf"                  
    </el-upload>
    
    
    
    
    
    beforeAvatarUploadPdf(file){
        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)				
    				const extension = testmsg === 'pdf' ||  testmsg === 'PDF';
    			
    				const isLt50M = file.size / 1024 / 1024 < 50
    				if(!extension ) {
    					this.$message({
    						message: '上传文件只能是pdf格式!',
    						type: 'error'
              });
              return false;//必须加上return false; 才能阻止
    				}
    				if(!isLt50M) {
    					this.$message({
    						message: '上传文件大小不能超过 50MB!',
    						type: 'error'
              });
             return false;
    				}
    				return extension ||  isLt50M
    }

     

    必须加上return false; 才能阻止

     

    展开全文
  • vue+axios+elementUI文件上传与下载

    千次阅读 2019-07-19 19:18:00
    vue+axios+elementUI文件上传与下载 Simple_Learn关注 0.52018.05.30 10:20字数 209阅读 15111评论 4喜欢 6 1.文件上传 这里主要介绍一种,elementUI官网上传组件http-request这种属性的使用。 ...
  • 3、附件上传过程中进度提示。 前端使用:vue + elementui + axios 后端使用:springboot 介绍之前,先学习2个小技巧设置 1、全局loading弹框定义使用 创建一个loading.js文件: import {Loading} from 'element-ui'...
  • 这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大) ...
  • 目前根据搜索到的方法,压缩出了一种特别简单的文件上传方式(只有上传,没有什么优化,适合初学者学习) 使用的是vue框架和elementUI库 第一种 使用它的action方法 首先来看一段代码 <el-upload class=...
  • Vue + Element-ui upload 上传压缩图片

    千次阅读 多人点赞 2019-07-08 11:47:28
    场景:在Vue项目里,利用ElementUI的upload组件,上传图片,在图片上传前,对图片进行压缩。 做法概述:在before-upload方法中对图片文件进行处理,并返回处理后的文件。 本人查看了一下upload的源码,发现,...
  • 压缩的方法放在before-upload中,这个方法可以接受一个promise,提一下,最好下载新版本的element-UI,以前的旧版本可能不支持返回promise // 引入image-conversion import imageConversion from 'image-conversion' ...
  • vue+elementUI(el-upload)图片压缩,默认同比例压缩

    万次阅读 热门讨论 2018-12-06 16:54:44
    这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大) ...
  • 可以看到,上传.zip压缩文件时候是没问题的 但是,上传.rar文件的时候type这个字段却会返回空 这时候在before-upload的钩子里面通过file.type来校验文件类型就行不通了,这时候可以采用正则的方法把扩展名截出来,...
  • 前言: 首先你的需求:你的项目图片是需要自动上传还是手动上传 自动上传:auto-upload为true时,before-upload有效;auto-upload为false时,before-upload无效
  • 1 <el-upload 2 class="upload-demo" 3 ref="upLoad2" ----------------------上传控件唯一标志 4 action="https://jsonplaceholder.typicode.com/posts/" 5 ...
  • 我发现 ,其实在做图片上传的时候就应该考虑到图片压缩上传的问题,element-ui在上传一个大的图片时浏览器会报错,当然也并没有提供相关的属性跟方法去进行图片的压缩,这个时候就需要我们自己去想办法实现,当然...
  • 文章目录调用摄像头拍照本地预览旋转压缩上传 功能需求是移动端扫描二维码之后,跳转到在线网页进行自拍,然后上传拍照结果。 调用摄像头拍照 在h5中,使用input type="file"的 capture="camera"这个属性就可以...
  • 项目中使用el-upload组件老是踩坑,解析一下文档的相关内容,以便后期需要的时候方便查阅。 遇到的相关问题 action action 这个是必填的参数,填写请求地址,不填写...multiple 是否可选多个文件上传 accept ...
  • 为了降低资源服务器的消耗、有些时候需要前端压缩图片,转码等一些处理。 一、Base64的优点和缺点 图片转换成base64格式的优缺点 1. 优点 (1)base64格式的图片是文本格式,占用内存小,转换后的大小比例...
  • DEFAULT_ALLOWED_EXTENSION = { //图片 "bmp","gif","jpg","jpeg","png", //word excel powerpoint "doc","docx","xls","xlsx","ppt","pptx","html","htm","txt", //压缩文件 "rar","zip","gz","bz2", ...
  • 选取文件</el-button> </el-upload> </el-form-item> </el-form> methods方法: //on-change:文件状态改变时的钩子,添加文件上传成功和上传失败时都会被调用 fileChange(file, fileList) { let existFile = ...
  • 由于浏览器不能使用js直接读取文件,因此考虑使用element ui 中的upload组件获取文件信息,然后使用js 中的fileReader读取文件内容。 具体思路 1)使用upload组件读取文件信息。 2)使用js中的fileR...
  • 前端压缩图片,以及使用(iview,element-ui )的upload 组件上传压缩前言一、压缩方法介绍二、压缩代码三、 `iview` `element-ui`上传处理DEMO演示总结 前言   今天分享一下前端如何压缩图片。 一、压缩方法...
  • vue+elementUi做的图片上传组件

    千次阅读 2019-01-07 19:15:19
    在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息。加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片...
  • 将前端上传文件保存到服务器,返回给前端文件在服务器的路径保存至数据库。 前端代码 <el-upload name="file" class="upload-demo" drag action="http://localhost:8081/media/fileupload/" :on-success=...
  • 准备工作: npm install compressorjs ...1.我们需求是图片宽度超过600像素的, 压缩到宽度600像素, 低于600像素的不做处理, 所以需要在上传前计算图片宽度. 2.具体的压缩参数请去github上看一下, 有帮...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 398
精华内容 159
关键字:

elementui上传文件压缩